/* smart-carousel */
smart-carousel {
    width: var(--smart-carousel-default-width);
    height: var(--smart-carousel-default-height);
}

    smart-carousel[disabled] {
        opacity: 0.55;
        cursor: default;
        pointer-events: none;
    }

    .smart-carousel > .smart-container,
    .smart-carousel.smart-container {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .smart-carousel .smart-items-container {
        position: relative;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .smart-carousel[swipe] {
        user-select: none;
    }

    .smart-carousel .smart-carousel-item {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        opacity: 0;
        z-index: 0;
        box-sizing: border-box;
        pointer-events: none;
        user-select: none;
        background-position: center;
        background-repeat: no-repeat;
    }

        .smart-carousel .smart-carousel-item.smart-active {
            opacity: 1;
            pointer-events: all;
            user-select: text;
        }

[disabled] .smart-carousel-item.smart-active {
    pointer-events: none;
}

.smart-carousel .smart-carousel-item .smart-carousel-item-container {
    pointer-events: none;
    user-select: text;
    position: relative;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    padding-top: 50px;
    z-index: 1;
    box-sizing: border-box;
    background-position: center;
    background-size: cover;
}

.smart-carousel .smart-carousel-item .smart-carousel-item-label,
.smart-carousel .smart-carousel-item .smart-carousel-item-content {
    text-align: center;
    box-sizing: border-box;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.smart-carousel .smart-carousel-item .smart-carousel-item-content {
    top: 40%;
    transform: translate(-50%, 0%);
}

.smart-carousel .smart-carousel-item .smart-carousel-html-content {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
    box-sizing: border-box;
}

.smart-carousel .smart-arrow {
    position: absolute;
    top: 0px;
    width: 30px;
    height: 100%;
    cursor: pointer;
    opacity: 0.6;
    display: block;
}

.smart-carousel[hide-arrows] .smart-arrow {
    display: none;
}

.smart-carousel .smart-arrow > .smart-button {
    border-width: 0px;
}

    .smart-carousel  .smart-arrow > .smart-button:active {
        background-color: transparent;
    }

.smart-carousel .smart-arrow:after {
    font-size: 20px;
    position: absolute;
    left: 0px;
    top: 0px;
    pointer-events: none;
    user-select: none;
}

.smart-carousel .smart-arrow[disabled] {
    opacity: 0.4;
    pointer-events: none;
}

.smart-carousel .smart-arrow:focus,
.smart-carousel .smart-arrow:hover {
    opacity: 0.8;
}

.smart-carousel .smart-arrow:active {
    opacity: 1;
}

.smart-carousel  .smart-arrow-left {
    left: 0px;
}

.smart-carousel  .smart-arrow-right {
    right: 0px;
}

.smart-carousel .smart-indicators-container {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
}

.smart-carousel[hide-indicators] .smart-indicators-container {
    display: none;
}

.smart-carousel .smart-indicator {
    width: 10px;
    height: 10px;
    border: 1px solid gray;
    background-color: white;
    margin: 2px;
    cursor: pointer;
    box-sizing: content-box;
    opacity: 0.5;
}

    .smart-carousel .smart-indicator.smart-active {
        opacity: 0.9;
        border-width: 3px;
    }

    .smart-carousel .smart-indicator:hover {
        opacity: 0.7;
    }

/* animations */
.smart-carousel:not([animation='none']) .smart-carousel-item {
    animation-duration: 1s;
}

    /* displayMode:"default" animations */
    /* fade */
    .smart-carousel:not([animation='none']) .smart-carousel-item.smart-active.smart-animate-trigger,
    .smart-carousel:not([animation='none']).fade .smart-carousel-item.smart-active.smart-animate-trigger {
        animation-name: carousel-active-fade;
    }

    .smart-carousel:not([animation='none']) .smart-carousel-item.smart-out.smart-animate-trigger,
    .smart-carousel:not([animation='none']).fade .smart-carousel-item.smart-out.smart-animate-trigger {
        animation-name: carousel-out-fade;
    }

@keyframes carousel-active-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes carousel-out-fade {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* slide right to left */
.smart-carousel:not([animation='none']).slide .smart-carousel-item.smart-active.smart-animate-trigger,
.smart-carousel:not([animation='none']).slide-left .smart-carousel-item.smart-active.smart-animate-trigger {
    animation-name: carousel-active-slide;
}

.smart-carousel:not([animation='none']).slide .smart-carousel-item.smart-out.smart-animate-trigger,
.smart-carousel:not([animation='none']).slide-left .smart-carousel-item.smart-out.smart-animate-trigger {
    animation-name: carousel-out-slide;
}

@keyframes carousel-active-slide {
    from {
        left: 100%;
        opacity: 1;
    }

    to {
        left: 0%;
        opacity: 1;
    }
}

@keyframes carousel-out-slide {
    from {
        left: 0%;
        opacity: 1;
    }

    to {
        left: -100%;
        opacity: 1;
    }
}

/* slide left to right */
.smart-carousel:not([animation='none']).slide-right .smart-carousel-item.smart-active.smart-animate-trigger {
    animation-name: carousel-active-slide-right;
}

.smart-carousel:not([animation='none']).slide-right .smart-carousel-item.smart-out.smart-animate-trigger {
    animation-name: carousel-out-slide-right;
}

@keyframes carousel-active-slide-right {
    from {
        opacity: 1;
        left: -100%;
    }

    to {
        opacity: 1;
        left: 0%;
    }
}

@keyframes carousel-out-slide-right {
    from {
        left: 0%;
        opacity: 1;
    }

    to {
        left: 100%;
        opacity: 1;
    }
}

/* slide bottom to top */
.smart-carousel:not([animation='none']).slide-top .smart-carousel-item.smart-active.smart-animate-trigger {
    animation-name: carousel-active-slide-top;
}

.smart-carousel:not([animation='none']).slide-top .smart-carousel-item.smart-out.smart-animate-trigger {
    animation-name: carousel-out-slide-top;
}

@keyframes carousel-active-slide-top {
    from {
        top: 100%;
        opacity: 1;
    }

    to {
        top: 0%;
        opacity: 1;
    }
}

@keyframes carousel-out-slide-top {
    from {
        top: 0%;
        opacity: 1;
    }

    to {
        top: -100%;
        opacity: 1;
    }
}

/* slide top to bottom */
.smart-carousel:not([animation='none']).slide-bottom .smart-carousel-item.smart-active.smart-animate-trigger {
    animation-name: carousel-active-slide-bottom;
}

.smart-carousel:not([animation='none']).slide-bottom .smart-carousel-item.smart-out.smart-animate-trigger {
    animation-name: carousel-out-slide-bottom;
}

@keyframes carousel-active-slide-bottom {
    from {
        opacity: 1;
        top: -100%;
    }

    to {
        opacity: 1;
        top: 0px;
    }
}

@keyframes carousel-out-slide-bottom {
    from {
        opacity: 1;
        top: 0px;
    }

    to {
        opacity: 1;
        top: 100%;
    }
}


/* displayMode:"3d"*/
.smart-carousel[display-mode="3d"] .smart-carousel-html-content {
    padding-left: 30px;
    padding-right: 20px;
}

.smart-carousel[display-mode="3d"] .smart-carousel-item {
    width: var(--smart-carousel-3d-mode-slide-width);
    height: var(--smart-carousel-3d-mode-slide-height);
    border: white solid 20px;
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%) translateY(-50%) rotateX(1deg) scale(1);
    transition-duration: 0ms;
}

.smart-carousel[display-mode="3d"]:not([animation='none']) .smart-carousel-item {
    transition-duration: 700ms;
}

.smart-carousel[display-mode="3d"].circle .smart-carousel-item {
    border-radius: 50%;
}

.smart-carousel[display-mode="3d"]:not([animation='none']) .smart-carousel-item,
.smart-carousel[display-mode="3d"]:not([animation='none']) .smart-carousel-item.smart-active,
.smart-carousel[display-mode="3d"]:not([animation='none']) .smart-carousel-item.smart-out {
    animation-name: unset;
}

.smart-carousel[display-mode="3d"] .smart-carousel-item[position="-3"] {
    transform: perspective(800px) translateX(calc(-50% - 340px)) translateY(-50%) scale(0.4);
    opacity: .1;
    z-index: 1;
}

.smart-carousel[display-mode="3d"] .smart-carousel-item[position="-2"] {
    transform: perspective(800px) translateX(calc(-50% - 300px)) translateY(-50%) scale(0.5);
    opacity: .2;
    z-index: 8;
}

.smart-carousel[display-mode="3d"] .smart-carousel-item[position="-1"],
.smart-carousel[display-mode="3d"] .smart-carousel-item[position="1"] {
    opacity: .3;
    z-index: 9;
}

.smart-carousel[display-mode="3d"] .smart-carousel-item[position="-1"] {
    transform: perspective(800px) translateX(calc(-50% - 260px)) translateY(-50%) scale(0.6);
}

.smart-carousel[display-mode="3d"] .smart-carousel-item[position="1"] {
    transform: perspective(800px) translateX(calc(-50% + 260px)) translateY(-50%) scale(0.6);
}

.smart-carousel[display-mode="3d"] .smart-carousel-item[position="2"] {
    transform: perspective(800px) translateX(calc(-50% + 300px)) translateY(-50%) scale(0.5);
    opacity: .2;
    z-index: 8;
}

.smart-carousel[display-mode="3d"] .smart-carousel-item[position="3"] {
    transform: perspective(800px) translateX(calc(-50% + 340px)) translateY(-50%) scale(0.4);
    opacity: .1;
    z-index: 1;
}

/*Carousel 3d vertical*/
.smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="-3"] {
    transform: perspective(800px) translateX(-50%) translateY(calc(-50% - 210px)) scale(0.4);
}

.smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="-2"] {
    transform: perspective(800px) translateX(-50%) translateY(calc(-50% - 180px)) scale(0.5);
}

.smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="-1"] {
    transform: perspective(800px) translateX(-50%) translateY(calc(-50% - 150px)) scale(0.6);
}

.smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="1"] {
    transform: perspective(800px) translateX(-50%) translateY(calc(-50% + 150px)) scale(0.6);
}

.smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="2"] {
    transform: perspective(800px) translateX(-50%) translateY(calc(-50% + 180px)) scale(0.5);
}

.smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="3"] {
    transform: perspective(800px) translateX(-50%) translateY(calc(-50% + 210px)) scale(0.4);
}

/*Carousel 3d horizontal stacked*/
.smart-carousel:not([animation='none']).horizontal-stacked[display-mode="3d"] .smart-carousel-item[position="-3"] {
    transform: perspective(800px) translateX(calc(-50% - 395px)) translateY(-50%) scale(0.4);
}

.smart-carousel:not([animation='none']).horizontal-stacked[display-mode="3d"] .smart-carousel-item[position="-2"] {
    transform: perspective(800px) translateX(calc(-50% - 355px)) translateY(-50%) scale(0.5);
}

.smart-carousel:not([animation='none']).horizontal-stacked[display-mode="3d"] .smart-carousel-item[position="-1"] {
    transform: perspective(800px) translateX(calc(-50% - 280px)) translateY(-50%) scale(0.6);
}

.smart-carousel:not([animation='none']).horizontal-stacked[display-mode="3d"] .smart-carousel-item[position="1"] {
    transform: perspective(800px) translateX(calc(-50% + 280px)) translateY(-50%) scale(0.6);
}

.smart-carousel:not([animation='none']).horizontal-stacked[display-mode="3d"] .smart-carousel-item[position="2"] {
    transform: perspective(800px) translateX(calc(-50% + 355px)) translateY(-50%) scale(0.5);
}

.smart-carousel:not([animation='none']).horizontal-stacked[display-mode="3d"] .smart-carousel-item[position="3"] {
    transform: perspective(800px) translateX(calc(-50% + 395px)) translateY(-50%) scale(0.4);
}

/*Carousel 3d bottom-top*/
.smart-carousel:not([animation='none']).bottom-top[display-mode="3d"] .smart-carousel-item[position="-3"] {
    transform: perspective(800px) translateX(calc(-50% - 450px)) translateY(calc(-50% + 150px)) scale(0.2);
}

.smart-carousel:not([animation='none']).bottom-top[display-mode="3d"] .smart-carousel-item[position="-2"] {
    transform: perspective(800px) translateX(calc(-50% - 380px)) translateY(calc(-50% + 100px)) scale(0.4);
}

.smart-carousel:not([animation='none']).bottom-top[display-mode="3d"] .smart-carousel-item[position="-1"] {
    transform: perspective(800px) translateX(calc(-50% - 280px)) translateY(calc(-50% + 30px)) scale(0.6);
}

.smart-carousel:not([animation='none']).bottom-top[display-mode="3d"] .smart-carousel-item[position="1"] {
    transform: perspective(800px) translateX(calc(-50% + 280px)) translateY(calc(-50% - 30px)) scale(0.6);
}

.smart-carousel:not([animation='none']).bottom-top[display-mode="3d"] .smart-carousel-item[position="2"] {
    transform: perspective(800px) translateX(calc(-50% + 380px)) translateY(calc(-50% - 100px)) scale(0.4);
}

.smart-carousel:not([animation='none']).bottom-top[display-mode="3d"] .smart-carousel-item[position="3"] {
    transform: perspective(800px) translateX(calc(-50% + 450px)) translateY(calc(-50% - 150px)) scale(0.2);
}

/*Carousel 3d top-bottom*/
.smart-carousel:not([animation='none']).top-bottom[display-mode="3d"] .smart-carousel-item[position="-3"] {
    transform: perspective(800px) translateX(calc(-50% - 450px)) translateY(calc(-50% - 150px)) scale(0.2);
}

.smart-carousel:not([animation='none']).top-bottom[display-mode="3d"] .smart-carousel-item[position="-2"] {
    transform: perspective(800px) translateX(calc(-50% - 380px)) translateY(calc(-50% - 100px)) scale(0.4);
}

.smart-carousel:not([animation='none']).top-bottom[display-mode="3d"] .smart-carousel-item[position="-1"] {
    transform: perspective(800px) translateX(calc(-50% - 280px)) translateY(calc(-50% - 30px)) scale(0.6);
}

.smart-carousel:not([animation='none']).top-bottom[display-mode="3d"] .smart-carousel-item[position="1"] {
    transform: perspective(800px) translateX(calc(-50% + 280px)) translateY(calc(-50% + 30px)) scale(0.6);
}

.smart-carousel:not([animation='none']).top-bottom[display-mode="3d"] .smart-carousel-item[position="2"] {
    transform: perspective(800px) translateX(calc(-50% + 380px)) translateY(calc(-50% + 100px)) scale(0.4);
}

.smart-carousel:not([animation='none']).top-bottom[display-mode="3d"] .smart-carousel-item[position="3"] {
    transform: perspective(800px) translateX(calc(-50% + 450px)) translateY(calc(-50% + 150px)) scale(0.2);
}


/* displayMode:"multiple"*/
.smart-carousel:not([animation='none'])[display-mode="multiple"] .smart-carousel-item.smart-out,
.smart-carousel:not([animation='none'])[display-mode="multiple"] .smart-carousel-item.smart-active,
.smart-carousel:not([animation='none'])[display-mode="multiple"] .smart-carousel-item.smart-animate-trigger.smart-out,
.smart-carousel:not([animation='none'])[display-mode="multiple"] .smart-carousel-item.smart-animate-trigger.smart-active {
    animation-name: none;
}

.smart-carousel[display-mode="multiple"] .smart-items-container {
    overflow: hidden;
    width: max-content;
    transition: margin-left ease-in-out;
}

.smart-carousel:not([animation='none'])[display-mode="multiple"] .smart-items-container {
    transition-duration: 1s;
}

.smart-carousel[display-mode="multiple"] .smart-carousel-item {
    opacity: 1;
    float: left;
    display: inline-block;
    position: relative;
    width: var(--smart-carousel-multiple-mode-slide-width);
}

    .smart-carousel[display-mode="multiple"] .smart-carousel-item.smart-active {
        background-color: lightgray;
        transition: background-color 1s ease-in-out;
    }

    .smart-carousel[display-mode="multiple"] .smart-carousel-item.smart-out {
        transition: background-color 1s ease-in-out;
    }

.smart-carousel smart-repeat-button[hover] button {
    background-color: transparent;
}

/* --- Right-To-Left --- */
.smart-carousel[right-to-left] .smart-carousel-item,
.smart-carousel[right-to-left] .smart-indicators-container {
    direction: rtl;
}
/* --- */