.swiper-container {
    --swiper-theme-color: var(--wp--preset--color--primary);
    --swiper-preloader-color: var(--swiper-theme-color);

    --swiper-navigation-size: 28px;
    --swiper-navigation-width: var(--swiper-navigation-size);
    --swiper-navigation-height: var(--swiper-navigation-size);
    --swiper-navigation-border-radius: 999px;
    --swiper-navigation-top-offset: 50%;
    --swiper-navigation-sides-offset: calc(0.5 * var(--swiper-navigation-width));

    --swiper-navigation-color: #fff;
    --swiper-navigation-opacity: 1;
    --swiper-navigation-hover-color: var(--swiper-theme-color);
    --swiper-navigation-hover-opacity: 1;
    --swiper-navigation-inactive-color: var(--swiper-navigation-color);
    --swiper-navigation-inactive-opacity: 0.2;

    --swiper-navigation-icon-color: var(--swiper-navigation-hover-color);
    --swiper-navigation-icon-hover-color: var( --swiper-navigation-color);
    --swiper-navigation-icon-inactive-color: var(--swiper-navigation-icon-color);

    --swiper-pagination-color: var(--swiper-theme-color);
    --swiper-pagination-bottom: var(--swiper-pagination-bullet-height);

    --swiper-pagination-bullet-width: 10px;
    --swiper-pagination-bullet-height: var(--swiper-pagination-bullet-width);
    --swiper-pagination-bullet-border-radius: 999px;
    --swiper-pagination-bullet-vertical-gap: 3px;
    --swiper-pagination-bullet-horizontal-gap: 3px;

    --swiper-pagination-bullet-color: var(--swiper-pagination-color);
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-hover-color: var(--swiper-theme-color);
    --swiper-pagination-bullet-hover-opacity: 1;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: 0.66;
    --swiper-pagination-bullet-box-shadow: inset 0 0 0 1px var(--swiper-theme-color);

    position: relative;
}

/* navigation */
.swiper-button-prev,
.swiper-button-next,
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: var(--swiper-navigation-opacity);
    transition: opacity 0.3s ease, background 0.3s ease;
    width: var(--swiper-navigation-width);
    height: var(--swiper-navigation-height);
    background: var(--swiper-navigation-color);
    border-radius: var(--swiper-navigation-border-radius);
}

.swiper-container .swiper-button-prev:hover,
.swiper-container .swiper-button-next:hover {
    opacity: var(--swiper-navigation-hover-opacity);
    background-color: var(--swiper-navigation-hover-color);
}

.swiper-container .swiper-button-next.swiper-button-disabled,
.swiper-container .swiper-button-prev.swiper-button-disabled {
    opacity: var(--swiper-navigation-inactive-opacity);
    background-color: var(--swiper-navigation-inactive-color);
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: var(--wp--preset--font-size--small);
    color: var(--swiper-navigation-icon-color);
}

.swiper-container .swiper-button-prev:hover::after,
.swiper-container .swiper-button-next:hover::after {
    color: var(--swiper-navigation-icon-hover-color);
}

.swiper-container .swiper-button-next.swiper-button-disabled::after,
.swiper-container .swiper-button-prev.swiper-button-disabled::after {
    color: var(--swiper-navigation-icon-inactive-color);
}

.swiper-button-prev::after {
    content: '\f053';
}

.swiper-button-next::after {
    content: '\f054';
}

.swiper-button-lock {
    display: block;
}

/* pagination */
.swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-pagination-bullet {
    transition: opacity 0.3s ease, background 0.3s ease, width 0.3s ease;
    box-shadow: var(--swiper-pagination-bullet-box-shadow);
}

.swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover {
    background-color: var(--swiper-pagination-bullet-hover-color);
    opacity: var(--swiper-pagination-bullet-hover-opacity);
}

.swiper-pagination-bullet-active {
    width: calc(3 * var(--swiper-pagination-bullet-width));
    background-color: var(--swiper-pagination-bullet-color);
    box-shadow: none;
}

.swiper-pagination-lock {
    display: none;
}