@layer components {
    .staldia-slider-group {
        display: grid;
        gap: 2.5rem;
        overflow: clip;
    }
    .staldia-slider-list {
        display: flex;
        flex-wrap: nowrap;
    }
    .staldia-slider-item {
        flex-shrink: 0;
        width: 100%;
    }
    .staldia-slider-controls {
        display: grid;
        gap: 30px;
        align-items: center;
    }
    .staldia-slider-buttons-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 30px;
    }
    .staldia-slider-scroll-bar {
        display: none;
    }
    .staldia-slider-scroll-bar .swiper-scrollbar-drag {
        height: 100%;
        background: var(--color-accent);
    }
    .staldia-slider-buttons {
        display: flex;
        gap: .5rem;
    }
    .staldia-slider-button {
        position: relative;
        width: 50px;
        height: 50px;
        background: var(--color-accent);
        border-radius: 50%;
        transition: opacity .5s;
    }
    .staldia-slider-button:disabled { opacity: .6; }
    .staldia-slider-button:before {
        content: "";
        position: absolute;
        width: .4rem;
        height: .4rem;
        top: 50%;
        left: 50%;
        --border: 2px solid var(--color-text-on-accent);
        border-top: var(--border);
        border-right: var(--border);
        --rotate: 45deg;
        transform: translate(-50%, -50%) rotate(var(--rotate));
    }
    .staldia-slider-button-prev:before { --rotate: 225deg; }
    @media (min-width: 750px) {
        .staldia-slider-controls { grid-template-columns: 1fr auto; }
        .staldia-slider-scroll-bar {
            display: block;
            height: 2px;
            background: var(--color-bg-white);
        }
        .staldia-slider-scroll-bar .swiper-scrollbar-drag {
            height: 100%;
            background: var(--color-accent);
        }
    }
    @media (max-width: 355px) {
        .staldia-slider-buttons-container { justify-content: end; }
    }
}