:root{--slider-container-height: 2rem;--slider-button-height: 1.25rem;--slider-progress-height: .25rem}.slider{position:relative;height:var(--slider-container-height)}.slider-background{background-color:var(--grey-400-color);width:100%;height:var(--slider-progress-height);position:absolute;border-radius:var(--spaces-x1);top:calc(.5 * var(--slider-container-height) - .5 * var(--slider-progress-height))}.slider-foreground{left:0;height:var(--slider-progress-height);background-color:var(--primary-500-color);position:absolute;border-radius:var(--spaces-x1);top:calc(.5 * var(--slider-container-height) - .5 * var(--slider-progress-height))}.slider-button{height:var(--slider-button-height);width:var(--slider-button-height);border-radius:var(--slider-button-height);transform:translate(calc(-50% + var(--slider-progress-height) / 2),calc(-50% + var(--slider-progress-height) / 2));border:2px solid var(--primary-400-color);background-color:var(--white-color);position:absolute;transition:background-color var(--transition-fast);top:calc(.5 * var(--slider-container-height) - .5 * var(--slider-progress-height))}.slider-button:hover{background-color:var(--grey-100-color)}.slider-button:active{background-color:var(--grey-300-color)}