/* ////// Swiper Slider /////// */
body .swiper-pagination, 
body .swiper-pagination.swiper-pagination-bullets {
    position: static;
    width: auto;
}
.swiper, body .wp-site-blocks .swiper-scrollbar {
    z-index: 0;
}

.swiper-scrollbar:empty {
    display: none;
}

.all-slides-visible .swiper-wrapper {
    cursor: auto !important;
}
.all-slides-visible .swiper-slide:last-child {
    margin-right: 0 !important;
}

/* --- Indicator AND Arrows --- */
.indicator-and-arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5ch;
}
.controls-left .indicator-and-arrows,
.controls-left.indicator-and-arrows {
    justify-content: flex-start;
}
.controls-right .indicator-and-arrows,
.controls-right.indicator-and-arrows {
    justify-content: flex-end;
}


/* --- Arrows --- */
.sw-swiper-button-prev,
.sw-swiper-button-next {
  display: flex;
}
.sw-swiper-button-prev:hover,
.sw-swiper-button-next:hover {
    cursor: pointer;
}
.sw-swiper-button-prev svg,
.sw-swiper-button-next svg {
    height: var(--md-icon-size, 40px);
    width: auto;
}
.sw-swiper-button-prev img,
.sw-swiper-button-next img {
    object-fit: contain;
}
/* Arrows Inside */
.arrows-inside-slide .swiper-content {
    position: relative;
}
.arrows-inside-slide .swiper-content div[class*="sw-swiper-button"] {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity .3s ease;
    color: var(--wp--preset--color--dark, #222);
    padding: 5px;
}
.js .arrows-inside-slide .swiper-content:hover div[class*="sw-swiper-button"] {
    opacity: 1;
}
.arrows-inside-slide .swiper-content .sw-swiper-button-prev {
    left: 0;
}
.arrows-inside-slide .swiper-content .sw-swiper-button-next {
    right: 0;
}


/* --- Counter --- */
.swiper-pagination,
.swiper-pagination span {
    width: auto;
    font-size: calc(1.2rem + .2vw);
}
.swiper-pagination {
    display: flex;
    align-items: center;
    gap: .5ch;
}
span.sw-pag.sw-divider {
    width: 1.5px;
    background: currentColor;
    height: calc(.9 * var(--md-icon-size, 40px));
}

/* --- Scrollbar --- */
body .swiper-horizontal>.swiper-scrollbar, 
body .swiper-scrollbar.swiper-scrollbar-horizontal {
    width: auto;
    position: relative;
    top: unset;
    bottom: unset;
    left: unset;
}
body .swiper-scrollbar-drag {
    background: currentColor;
}
body .swiper-scrollbar.swiper-scrollbar-horizontal {
    width: 100%;
    align-self: center;
}
.swiper-scrollbar::before {
    position: absolute;
    content: '';
    inset: 0;
    background: currentColor;
    opacity: .2;
}

/* --- Indicators --- */
body .swiper-pagination.swiper-pagination-bullets span.swiper-pagination-bullet {
    height: calc(12px + .1vw);
    width: calc(12px + .1vw);
    display: inline-block;
    border-radius: 100px;
    background: transparent;
    opacity: 1;
    border: 2px solid currentColor;
    margin: 0;
}
body .swiper-pagination-bullets span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: currentColor;
    /* height: calc(16px + .1vw); */
    width: calc(36px + .1vw);
}
/* Vertical Bars */
body .indicators-vrt-bars .swiper-pagination-bullets span.swiper-pagination-bullet {
    width: 2px;
    border: unset;
    border-radius: unset;
    background: currentColor;
    opacity: .3;
    height: calc(16px + .1vw);
}
body .indicators-vrt-bars .swiper-pagination-bullets span.swiper-pagination-bullet.swiper-pagination-bullet-active  {
    height: calc(24px + .2vw);
    opacity: 1;
}
/* Squares */
body .indicators-squares .swiper-pagination {
    align-items: flex-end;
}
body .indicators-squares .swiper-pagination-bullets span.swiper-pagination-bullet {
    border-radius: 0;
    border-color: transparent;
    background: currentColor;
    opacity: .3;
}
body .indicators-squares .swiper-pagination-bullets span.swiper-pagination-bullet.swiper-pagination-bullet-active  {
    opacity: 1;
    width: calc(16px + .1vw);
    height: calc(16px + .1vw);
}

/* --- Thumbnail Nav --- */
.swiper-thumbs.all-slides-visible .swiper-wrapper {
    justify-content: center;
}
.thumbs-slider .swiper-slide {
    width: auto;

    /* min-width: 200px; */
}

.thumbs-slider :is(svg, img) {
    object-fit: contain;
    object-position: center;
    height: calc(30px + 0.5vw);
    width: auto;
    aspect-ratio: initial;
    opacity: .5;
    filter: saturate(0.3);
    transition: filter .3s ease, opacity .3s ease;
}
.thumbs-slider.thumb-cover img {
    width: calc(170px + 5vw);
    object-fit: cover;
}
.thumbs-slider .swiper-slide :is(img,svg):hover,
.thumbs-slider .swiper-slide :is(img,svg):focus {
    filter: saturate(1);
    opacity: .6;
    cursor: pointer;
}
.thumbs-slider .swiper-slide-thumb-active :is(img,svg),
.thumbs-slider .swiper-slide-thumb-active :is(img,svg):hover,
.thumbs-slider .swiper-slide-thumb-active :is(img,svg):focus {
    opacity: 1;
    filter: saturate(1);
}

.thumbs-slider.thumb-size-med :is(svg, img) {
    height: calc(100px + 2vw);
}
.thumbs-slider.thumb-size-large :is(svg, img) {
    height: calc(150px + 3vw);
}

/* --- NO JS --- */
.no-js .swiper {
    padding-bottom: var(--wp--preset--spacing--20);
    overflow-x: auto;
    width: 100%;
}
.no-js .sw-swiper-button-prev, 
.no-js .sw-swiper-button-next,
.no-js .thumbs-slider {
    display: none;
}