.js-carousel-layout {
  position: relative;
  padding: 0;

  // This box-sizng is required to make the some features of swipers to work like centered active slide.
  &,
  * {
    box-sizing: border-box;
  }

  &.swiper-3d {
    .swiper-slide-shadow-top,
    .swiper-slide-shadow-right,
    .swiper-slide-shadow-bottom,
    .swiper-slide-shadow-left,
    .swiper-slide-shadow {
      position: absolute;
    }
  }

  .is-carousel-item {
    display: block; // Override bootstrap style in the carousel-item class
    // Override third-party styles such as bootstrap
    margin: 0;
    transition-property: transform, opacity, height, outline !important;

    // Remove unwanted margin added by Gutenberg
    [class*="swiper-slide-shadow"] {
      margin: 0;
    }
  }

  .is-equal-height > .swiper-slide {
    height: auto;
  }

  // Inner reveal animations
  [data-reveal-animation] {
    transition: all .15s;
  }

  // Navigation
  .swiper-horizontal {
    .swiper-button-next,
    .swiper-button-prev {
      margin-top: calc(0px - (var(--swiper-navigation-size) / 2)) !important;
    }
  }

  .swiper-button-next,
  .swiper-button-prev {
    &.has-custom-icon {
      width: var(--swiper-navigation-size, 40px);
      height: var(--swiper-navigation-size, 40px);

      &::after {
        display: none;
      }

      svg {
        width: 100%;
        height: auto;
        fill: var(--swiper-navigation-color, var(--swiper-theme-color));
      }
    }
  }

  // Pagination
  .swiper-pagination-bullet {
    --swiper-pagination-bullet-border-radius: 20rem !important;
    border: 1px solid var(--swiper-pagination-bullet-border-color, transparent);
    transition: .3s;
  }

  .active-bullet-width .swiper-pagination-bullet-active {
    width: var(--swiper-pagination-active-bullet-width);
  }

  .active-bullet-height .swiper-pagination-bullet-active {
    height: var(--swiper-pagination-active-bullet-height);
  }

  .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  }

  .swiper-pagination-horizontal {
    .swiper-pagination-bullet {
      vertical-align: middle;
    }
  }

  .swiper-pagination-vertical {
    .swiper-pagination-bullet {
      margin-inline: auto !important;
    }
  }

  // Scrollbar
  .swiper-scrollbar {
    background-color: var(--swiper-scrollbar-track-color, rgba(0, 0, 0, 0.2));

    &-drag {
      background-color: var(
        --swiper-scrollbar-slider-color,
        rgba(0, 0, 0, 0.5)
      );
    }
  }

  .swiper-vertical {
    height: 100%;
    max-height: 100%;
  }

  // Pagination custom position or with other controls
  .cbb-carousel-controls {
    position: absolute;
    top: auto;
    bottom: var(--swiper-pagination-bottom, 10px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none !important;

    > * {
      position: static !important;
      margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 5px) !important;
    }

    .swiper-button-next {
      order: 3
    }

    .swiper-pagination {
      width: auto;
      transform: translateX(0) !important;
    }

    &:has(.swiper-pagination-lock) {
      display: none;
    }
  }

  // Pagination positions
  .pag-is-top-left,
  .pag-is-top-right {
    top: var(--swiper-pagination-bottom, 10px) !important;
    bottom: auto !important;
  }

  .pag-is-top-left,
  .pag-is-bottom-left {
    justify-content: flex-start !important;
    padding-left: var(--cbb--pag-x-offset, 16px);
  }

  .pag-is-top-right,
  .pag-is-bottom-right {
    justify-content: flex-end !important;
    padding-right: var(--cbb--pag-x-offset, 16px);
  }

  // Navigation positions
  .nav-custom-position {
    --nav-x-offset: var(--cbb--nav-x-offset, 16px);
    --nav-x-offset-1: calc(var(--cbb--nav-x-offset, 16px) + var(--swiper-navigation-size, 40) + 8px);
    --nav-x-offset-2: calc(var(--cbb--nav-x-offset, 16px) + var(--swiper-navigation-size, 40) + 8px);

    z-index: 11;
    margin: 0 !important;
  }

  .is-top-left,
  .is-top-right {
    top: var(--cbb--nav-y-offset, 16px);
  }

  .is-bottom,
  .is-bottom-left,
  .is-bottom-right {
    top: auto;
    bottom: var(--cbb--nav-y-offset, 16px);
  }

  .is-top-left,
  .is-bottom-left {
    left: var(--nav-x-offset);

    &.swiper-button-next {
      left: var(--nav-x-offset-1);

      &.has-custom-icon {
        left: var(--nav-x-offset-2);
      }
    }
  }

  .is-top-right,
  .is-bottom-right {
    right: var(--nav-x-offset);
    left: auto;

    &.swiper-button-prev {
      right: var(--nav-x-offset-1);

      &.has-custom-icon {
        right: var(--nav-x-offset-2);
      }
    }
  }

  // Bottom
  .is-bottom {
    left: calc(50% - var(--swiper-navigation-size, 40) - 4px);

    &.swiper-button-next {
      left: calc(50% + 4px);
    }
  }

  // Focus visible
  *:focus-visible {
    outline: 2px dotted currentColor;
    outline-offset: 2px;
  }

  // Core query
  &.wp-block-query {
    > .swiper {
      max-width: none;
    }

    .wp-block-post-template {
      padding: 0;
      margin: 0;
    }

    .wp-block-post {
      padding: 0;
      margin: 0;
    }

    &.alignfull > .wp-block-post-template {
      padding-right: 0;
      padding-left: 0;
    }
  }

  .wp-block-post-template > li {
    transition-property: transform, opacity, height, outline !important;
  }

  > .swiper > ul > li + li,
  > ul > li + li {
    margin-top: 0 !important;
  }
}

// Active slides
.centered-active-slide {
  > .swiper-slide {
    transition: transform .3s ease;
    transform: scale(var(--swiper-inactive-scale, 1)) translateZ(0);
  }

  > .swiper-slide.swiper-slide-active {
    transform: scale(1) translateZ(0) !important;
  }
}

// Play/pause
.cbb-carousel-play-pause {
  position: absolute;
  top: auto;
  z-index: 11; // Above pagination

  svg {
    --progress: var(--cbb--progress, 0);
    // position: absolute;
    // inset: 0;
    fill: none;
    stroke-width: var(--cbb--progress-track-size, 4px);
    stroke: var(--cbb--progress-color, var(--swiper-theme-color));
    stroke-linecap: round;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);

    .track {
      stroke-dasharray: none;
      stroke: var(--cbb--progress-track-color, #fff);
    }
  }

  &:focus {
    outline-style: dotted;
  }

  &.is-bottom-left,
  &.is-bottom-right {
    bottom: var(--cbb--pp-y-offset, 1rem);
  }
  &.is-bottom-left {
    left: var(--cbb--pp-x-offset, 1rem);
  }

  &.is-bottom-right {
    right: var(--cbb--pp-x-offset, 1rem);
  }

  &.is-with-pagination {
    position: static;
  }

  &.swiper-button-lock {
    display: none !important;
  }
}

// Preload style on the frontend
.cbb-carousel-preload {
  overflow: hidden;

  > ul,
  > .carousel__inner {
    display: flex;
    gap: var(--cbb-carousel-gap, 0);
  }

  > ul > li,
  > .carousel__inner > .is-carousel-item {
    flex: 0 0 var(--cbb-slide-width, 100%);
  }
}

// Preloader
.cbb-loader {
  position: absolute;
  z-index: 2;
  top: calc(50% - 25px);
  left: calc(50% - 7px);
  font-size: 7px;
  color: var(--bb-attr--loader-color, #fff);
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.12s !important;

  &,
  &:before,
  &:after {
    width: 2em;
    height: 2em;
    margin: auto;
    border-radius: 50%;
    animation-fill-mode: both;
    animation: loader3Dots 1.5s infinite ease-in-out;
  }

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 0;
  }
  &:before {
    left: -3em;
    animation-delay: -0.24s;
  }
  &:after {
    left: 3em;
  }

  .slider-initialized > & {
    display: none;
  }
}

.has-preloader.is-fading-loader {
  > *:not(.cbb-loader) {
    visibility: hidden;
  }

  &.slider-initialized {
    > * {
      visibility: visible;
    }
  }
}

@keyframes loader3Dots {
  0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em; }
  40% { box-shadow: 0 2.5em 0 0; }
}