@layer components {

    /* Listing layout controls */
    .listing-layout-slider {
        --layout-slider-active-color: var(--color-brand-primary);
        --layout-slider-progress: 0%;
        --listing-layout-columns: 4;
        display: grid;
        gap: var(--space-8);
        border-radius: var(--radius-corner);
    }

    .listing-layout-slider[data-layout="roomy"] {
        --layout-slider-progress: 0%;
    }

    .listing-layout-slider[data-layout="compact"] {
        --layout-slider-progress: 33.333%;
    }

    .listing-layout-slider[data-layout="list"] {
        --layout-slider-progress: 66.666%;
    }

    .listing-layout-slider[data-layout="ticker"] {
        --layout-slider-progress: 100%;
    }

    .listing-layout-slider__rail::before {
        content: none;
    }

    .listing-layout-slider__rail::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: var(--layout-slider-progress);
        height: 100%;
        border-radius: var(--radius-corner);
        background: var(--layout-slider-active-color);
        transition: width .2s ease;
    }

    .listing-layout-slider__thumb {
        position: absolute;
        top: 50%;
        left: calc((100% - 1.5rem) / 3 * var(--listing-layout-index, 0));
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--space-24);
        height: var(--space-24);
        border-radius: var(--radius-corner);
        background-color: var(--color-brand-primary);
        cursor: pointer;
        transform: translateY(-50%);
        transition: left .2s ease;
    }
}