.tul-components-slider.carousel,
.tul-components-slider.carousel * {
    --tul-components-slider-icon-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.7.2 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons  Inc.--%3E%3Cpath fill='currentColor' d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E");
    --tul-components-slider-icon-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.7.2 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons  Inc.--%3E%3Cpath fill='currentColor' d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
    --tul-components-slider-pause-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='currentColor'%3E%3Cpath d='M360-320h80v-320h-80v320Zm160 0h80v-320h-80v320ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E");
    --tul-components-slider-play-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='currentColor'%3E%3Cpath d='m380-300 280-180-280-180v360ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E");
}



.tul-components-slider.carousel {}

.tul-components-slider.carousel>.carousel-inner {}


.tul-components-slider.carousel>.carousel-inner>.carousel-item {}



.tul-components-slider.carousel>.carousel-indicators {
    z-index: 20;
}

.tul-components-slider.carousel>.carousel-indicators>button {
    border-radius: 50% !important;
    height: 14px !important;
    width: 14px !important;
    margin: 0 5px !important;
    display: block !important;
    background-color: white !important;
    border-color: #333 !important;
    border-style: solid;
    border-width: 1pt !important;
}

.tul-components-slider.carousel>.carousel-indicators>button.active {
    background-color: var(--tul-components-color-main) !important;
}

.tul-components-slider.carousel>.carousel-control .carousel-control-icon {
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 2rem;
    color: white;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center center;
    background-image: none !important;

}

.tul-components-slider.carousel>.carousel-control-next .carousel-control-next-icon {
    mask-image: var(--tul-components-slider-icon-right);
}

.tul-components-slider.carousel>.carousel-control-prev .carousel-control-prev-icon {
    mask-image: var(--tul-components-slider-icon-left);
}

.tul-components-slider.carousel>.carousel-control>.carousel-control-icon-container {
    background-color: rgba(34, 34, 34, .7);
    aspect-ratio: 1/1;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 1px 1px 3px #333;
    backdrop-filter: blur(3px);
}

.tul-components-slider.carousel>.carousel-control>.carousel-control-icon-container:hover {
    background-color: var(--tul-components-color-main);
    opacity: 0.8;
}



/** Play/Pause button **/

.tul-components-slider.carousel .carousel-pause-play-button-container {
    width: 15%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 90%;
    display: none;
    z-index: 5;
}

.tul-components-slider.carousel.carusel-paused .carousel-pause-play-button-container,
.tul-components-slider.carousel.carusel-play .carousel-pause-play-button-container {
    display: block;
}

.tul-components-slider.carousel .carousel-pause-play-button-container>.carousel-pause-play-button {
    background-color: transparent;
    border-color: transparent;
    padding: 0;
    margin: 1rem;
}

.tul-components-slider.carousel .carousel-pause-play-button-container>.carousel-pause-play-button>.carousel-pause-play-icon {
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 2rem;
    color: white;
    background-color: currentColor;
    background-image: none !important;
    display: block;
    aspect-ratio: 1/1;
    width: 32px;
    height: 32px;
    mask-repeat: no-repeat, no-repeat;
    mask-position: left center, right center;
    mask-size: 50% 100%, 50% 100%;
    mask-image: var(--tul-components-slider-play-btn), var(--tul-components-slider-pause-btn);
}

.tul-components-slider.carousel.carusel-paused .carousel-pause-play-button-container>.carousel-pause-play-button>.carousel-pause-play-icon,
.tul-components-slider.carousel.carusel-play .carousel-pause-play-button-container>.carousel-pause-play-button>.carousel-pause-play-icon {
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 100% 100%;
}

.tul-components-slider.carousel.carusel-paused .carousel-pause-play-button-container>.carousel-pause-play-button>.carousel-pause-play-icon {
    mask-image: var(--tul-components-slider-pause-btn);
}

.tul-components-slider.carousel.carusel-play .carousel-pause-play-button-container>.carousel-pause-play-button>.carousel-pause-play-icon {
    mask-image: var(--tul-components-slider-play-btn);
}


/** max 1000px **/
@media(max-width: 1000px) {
    .tul-components-slider.carousel>.carousel-indicators {
        bottom: 10px !important;
    }

    .tul-components-slider.carousel>.carousel-control {
        width: 10%;
    }


    .tul-components-slider.carousel .carousel-pause-play-button-container {
        width: 10%;
    }

    .tul-components-slider.carousel .carousel-pause-play-button-container {
        display: none;
    }

    .tul-components-slider.carousel.carusel-paused .carousel-pause-play-button-container,
    .tul-components-slider.carousel.carusel-play .carousel-pause-play-button-container {
        display: none;
    }
}