@import "../../variables";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins/breakpoints";
@import "carouselMixins";

@include media-breakpoint-only(sm) {
    .carousel.indicators-sm {
        @include carousel-indicators();
    }

    .experience-einstein-einsteinCarousel .carousel.insufficient-sm-slides .carousel-control-next,
    .experience-einstein-einsteinCarousel .carousel.insufficient-sm-slides .carousel-control-prev,
    .experience-einstein-einsteinCarouselCategory .carousel.insufficient-sm-slides .carousel-control-prev,
    .experience-einstein-einsteinCarouselCategory .carousel.insufficient-sm-slides .carousel-control-next,
    .experience-einstein-einsteinCarouselProduct .carousel.insufficient-sm-slides .carousel-control-next,
    .experience-einstein-einsteinCarouselProduct .carousel.insufficient-sm-slides .carousel-control-prev,
    .experience-commerce_layouts-carousel .carousel.insufficient-sm-slides .carousel-control-next,
    .experience-commerce_layouts-carousel .carousel.insufficient-sm-slides .carousel-control-prev {
        display: none !important;
    }

    .experience-einstein-einsteinCarousel .carousel.insufficient-sm-slides,
    .experience-einstein-einsteinCarouselCategory .carousel.insufficient-sm-slides,
    .experience-einstein-einsteinCarouselProduct .carousel.insufficient-sm-slides,
    .experience-commerce_layouts-carousel .carousel.insufficient-sm-slides {
        padding-bottom: 0 !important;

        .pd-carousel-indicators {
            display: none !important;
        }
    }

    .carousel.controls-sm .carousel-control-next,
    .carousel.controls-sm .carousel-control-prev {
        display: flex;
        top: 45%;
    }

    .carousel.indicators-sm.controls-sm .carousel-control-next,
    .carousel.indicators-sm.controls-sm .carousel-control-prev {
        top: 40%;
    }

    // =============================================================================================

    .experience-einstein-einsteinCarousel .carousel-sm-2 .carousel-control-prev,
    .experience-einstein-einsteinCarousel .carousel-sm-2 .carousel-control-next,
    .experience-einstein-einsteinCarouselCategory .carousel-sm-2 .carousel-control-prev,
    .experience-einstein-einsteinCarouselCategory .carousel-sm-2 .carousel-control-next,
    .experience-einstein-einsteinCarouselProduct .carousel-sm-2 .carousel-control-prev,
    .experience-einstein-einsteinCarouselProduct .carousel-sm-2 .carousel-control-next,
    .experience-commerce_layouts-carousel .carousel-sm-2 .carousel-control-prev,
    .experience-commerce_layouts-carousel .carousel-sm-2 .carousel-control-next {
        top: 40%;
    }

    .carousel.carousel-sm-2.indicators-sm.controls-sm .carousel-control-prev,
    .carousel.carousel-sm-2.indicators-sm.controls-sm .carousel-control-next {
        top: 33%;
    }

    .carousel-sm-2 .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-sm-2 .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
        transition: none;
    }

    .carousel-sm-2 .carousel-item-next,
    .carousel-sm-2 .carousel-item-prev {
        position: relative;
        transform: translate3d(0, 0, 0);
    }

    .carousel-sm-2 .active.carousel-item + .carousel-item + .carousel-item {
        @include carousel-right-most-element(-50%);
    }

    .carousel-sm-2 .carousel-item-prev.carousel-item-right {
        @include carousel-left-most-element(-50%);
        @include carousel-transform(100%);
    }

    .carousel-sm-2 .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-sm-2 .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-sm-2 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
        position: relative;
        visibility: visible;

        @include carousel-transform(-100%);
    }

    .carousel-sm-2 .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-sm-2 .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-sm-2 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
        position: relative;
        visibility: visible;
        display: block;

        @include carousel-transform(100%);
    }

    .carousel-sm-2 .active,
    .carousel-sm-2 .active + .carousel-item {
        display: block;
    }

    .experience-einstein-einsteinCarousel .carousel.carousel-sm-2.insufficient-sm-slides .carousel-item,
    .experience-einstein-einsteinCarouselCategory .carousel.carousel-sm-2.insufficient-sm-slides .carousel-item,
    .experience-einstein-einsteinCarouselProduct .carousel.carousel-sm-2.insufficient-sm-slides .carousel-item,
    .experience-commerce_layouts-carousel .carousel.carousel-sm-2.insufficient-sm-slides .carousel-item {
        display: block !important;
    }

    // =============================================================================================
    .experience-einstein-einsteinCarousel .carousel-sm-3 .carousel-control-prev,
    .experience-einstein-einsteinCarousel .carousel-sm-3 .carousel-control-next,
    .experience-einstein-einsteinCarouselCategory .carousel-sm-3 .carousel-control-prev,
    .experience-einstein-einsteinCarouselCategory .carousel-sm-3 .carousel-control-next,
    .experience-einstein-einsteinCarouselProduct .carousel-sm-3 .carousel-control-prev,
    .experience-einstein-einsteinCarouselProduct .carousel-sm-3 .carousel-control-next,
    .experience-commerce_layouts-carousel .carousel-sm-3 .carousel-control-prev,
    .experience-commerce_layouts-carousel .carousel-sm-3 .carousel-control-next {
        top: 36%;
    }

    .carousel.carousel-sm-3.indicators-sm.controls-sm .carousel-control-prev,
    .carousel.carousel-sm-3.indicators-sm.controls-sm .carousel-control-next {
        top: 29%;
    }

    .carousel-sm-3 .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-sm-3 .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-sm-3 .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }

    .carousel-sm-3 .carousel-item-next,
    .carousel-sm-3 .carousel-item-prev {
        position: relative;
        transform: translate3d(0, 0, 0);
    }

    .carousel-sm-3 .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        @include carousel-right-most-element(-33.3333%);
    }

    .carousel-sm-3 .carousel-item-prev.carousel-item-right {
        @include carousel-left-most-element(-33.3333%);
        @include carousel-transform(100%);
    }

    .carousel-sm-3 .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-sm-3 .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-sm-3 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-sm-3 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        visibility: visible;

        @include carousel-transform(-100%);
    }

    .carousel-sm-3 .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-sm-3 .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-sm-3 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-sm-3 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        visibility: visible;
        display: block;

        @include carousel-transform(100%);
    }

    .carousel-sm-3 .active,
    .carousel-sm-3 .active + .carousel-item,
    .carousel-sm-3 .active + .carousel-item + .carousel-item {
        display: block;
    }

    .experience-einstein-einsteinCarousel .carousel.carousel-sm-3.insufficient-sm-slides .carousel-item,
    .experience-einstein-einsteinCarouselCategory .carousel.carousel-sm-3.insufficient-sm-slides .carousel-item,
    .experience-einstein-einsteinCarouselProduct .carousel.carousel-sm-3.insufficient-sm-slides .carousel-item,
    .experience-commerce_layouts-carousel .carousel.carousel-sm-3.insufficient-sm-slides .carousel-item {
        display: block !important;
    }

    // =============================================================================================
    .experience-einstein-einsteinCarousel .carousel-sm-4 .carousel-control-prev,
    .experience-einstein-einsteinCarousel .carousel-sm-4 .carousel-control-next,
    .experience-einstein-einsteinCarouselCategory .carousel-sm-4 .carousel-control-prev,
    .experience-einstein-einsteinCarouselCategory .carousel-sm-4 .carousel-control-next,
    .experience-einstein-einsteinCarouselProduct .carousel-sm-4 .carousel-control-prev,
    .experience-einstein-einsteinCarouselProduct .carousel-sm-4 .carousel-control-next,
    .experience-commerce_layouts-carousel .carousel-sm-4 .carousel-control-prev,
    .experience-commerce_layouts-carousel .carousel-sm-4 .carousel-control-next {
        top: 37%;
    }

    .carousel-sm-4.indicators-sm {
        .carousel-control-prev,
        .carousel-control-next {
            top: 30%;
        }
    }

    .carousel-sm-4 .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-sm-4 .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-sm-4 .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
    .carousel-sm-4 .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }

    .carousel-sm-4 .carousel-item-next,
    .carousel-sm-4 .carousel-item-prev {
        position: relative;
        transform: translate3d(0, 0, 0);
    }

    .carousel-sm-4 .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        @include carousel-right-most-element(-25%);
    }

    .carousel-sm-4 .carousel-item-prev.carousel-item-right {
        @include carousel-left-most-element(-25%);
        @include carousel-transform(100%);
    }

    .carousel-sm-4 .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-sm-4 .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-sm-4 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-sm-4 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .carousel-sm-4 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        visibility: visible;

        @include carousel-transform(-100%);
    }

    .carousel-sm-4 .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-sm-4 .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-sm-4 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-sm-4 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    .carousel-sm-4 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        visibility: visible;
        display: block;

        @include carousel-transform(100%);
    }

    .carousel-sm-4 .active,
    .carousel-sm-4 .active + .carousel-item,
    .carousel-sm-4 .active + .carousel-item + .carousel-item,
    .carousel-sm-4 .active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }

    .experience-einstein-einsteinCarousel .carousel.carousel-sm-4.insufficient-sm-slides .carousel-item,
    .experience-einstein-einsteinCarouselCategory .carousel.carousel-sm-4.insufficient-sm-slides .carousel-item,
    .experience-einstein-einsteinCarouselProduct .carousel.carousel-sm-4.insufficient-sm-slides .carousel-item,
    .experience-commerce_layouts-carousel .carousel.carousel-sm-4.insufficient-sm-slides .carousel-item {
        display: block !important;
    }

    // =============================================================================================
    .experience-einstein-einsteinCarousel .carousel-sm-6 .carousel-control-prev,
    .experience-einstein-einsteinCarousel .carousel-sm-6 .carousel-control-next,
    .experience-einstein-einsteinCarouselCategory .carousel-sm-6 .carousel-control-prev,
    .experience-einstein-einsteinCarouselCategory .carousel-sm-6 .carousel-control-next,
    .experience-einstein-einsteinCarouselProduct .carousel-sm-6 .carousel-control-prev,
    .experience-einstein-einsteinCarouselProduct .carousel-sm-6 .carousel-control-next,
    .experience-commerce_layouts-carousel .carousel-sm-6 .carousel-control-prev,
    .experience-commerce_layouts-carousel .carousel-sm-6 .carousel-control-next {
        top: 29.5%;
    }

    .carousel-sm-6.indicators-sm {
        .carousel-control-prev,
        .carousel-control-next {
            top: 22.5%;
        }
    }

    .carousel-sm-6 .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-sm-6 .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-sm-6 .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
    .carousel-sm-6 .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item,
    .carousel-sm-6 .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
    .carousel-sm-6 .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }

    .carousel-sm-6 .carousel-item-next,
    .carousel-sm-6 .carousel-item-prev {
        position: relative;
        transform: translate3d(0, 0, 0);
    }

    .carousel-sm-6 .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        @include carousel-right-most-element(-16.66667%);
    }

    .carousel-sm-6 .carousel-item-prev.carousel-item-right {
        @include carousel-left-most-element(-16.66667%);
        @include carousel-transform(100%);
    }

    .carousel-sm-6 .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-sm-6 .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-sm-6 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-sm-6 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .carousel-sm-6 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
    .carousel-sm-6 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
    .carousel-sm-6 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        visibility: visible;

        @include carousel-transform(-100%);
    }

    .carousel-sm-6 .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-sm-6 .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-sm-6 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-sm-6 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    .carousel-sm-6 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
    .carousel-sm-6 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
    .carousel-sm-6 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        visibility: visible;
        display: block;

        @include carousel-transform(100%);
    }

    .carousel-sm-6 .active,
    .carousel-sm-6 .active + .carousel-item,
    .carousel-sm-6 .active + .carousel-item + .carousel-item,
    .carousel-sm-6 .active + .carousel-item + .carousel-item + .carousel-item,
    .carousel-sm-6 .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
    .carousel-sm-6 .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }

    .experience-einstein-einsteinCarousel .carousel.carousel-sm-6.insufficient-sm-slides .carousel-item,
    .experience-einstein-einsteinCarouselCategory .carousel.carousel-sm-6.insufficient-sm-slides .carousel-item,
    .experience-einstein-einsteinCarouselProduct .carousel.carousel-sm-6.insufficient-sm-slides .carousel-item,
    .experience-commerce_layouts-carousel .carousel.carousel-sm-6.insufficient-sm-slides .carousel-item {
        display: block !important;
    }
}
