@use '../../tools/svg';
@use 'theme';

@mixin track() {
    width: 100%;
    height: theme.$track-height;
    border: none;
    border-radius: theme.$track-border-radius;
    transition: background theme.$transition-duration theme.$transition-timing;
}

@mixin thumb() {
    box-sizing: border-box;
    width: theme.$thumb-width;
    height: theme.$thumb-height;
    border: var(--slider-thumb-border-width, #{theme.$thumb-border-width}) theme.$thumb-border-style
        var(--slider-thumb-border-color, #{theme.$thumb-border-color});
    border-radius: theme.$thumb-border-radius;
    background: var(--slider-thumb-background-color, #{theme.$thumb-background-color})
        var(--slider-thumb-background-image, #{svg.escape(theme.$thumb-background-image)}) no-repeat center /
        theme.$thumb-background-size;
    box-shadow: var(--slider-thumb-box-shadow, #{theme.$thumb-box-shadow});
    cursor: grab;
    transition: box-shadow theme.$transition-duration theme.$transition-timing;
}

@mixin thumb-active() {
    cursor: grabbing;
}

@mixin thumb-focus() {
    box-shadow: theme.$thumb-box-shadow-state-focus;
}
