@layer components{.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}}