@use "../../core/jkl";

@mixin track {
    --track-color: var(--jkl-color-border-separator);
    --bar-color: var(--jkl-color-border-input-focus);
    --bar-height: #{jkl.rem(4px)};

    background-color: var(--track-color);
    border-radius: jkl.rem(100px);
    height: var(--bar-height);
    width: 100%;
    overflow: hidden;

    &__tracker {
        display: block;
        height: var(--bar-height);
        background-color: var(--bar-color);
    }

    @include jkl.forced-colors-mode {
        background-color: Canvas;

        &__tracker {
            background-color: CanvasText;
        }
    }
}