@import '_mixins';
@import '_vars';

$bar-height: .8rem;

$thumb-size: 1.25rem;
$thumb-margin: ($thumb-size - $bar-height) * .5;

.slider {
    &-bar {
        & {
            @include border-radius($bar-height * .5);
            position: relative;
            border: 1px solid $color-input-border;
            margin-bottom: 1.25rem;
            margin-top: .25rem;
            margin-right: $thumb-size * .5;
            background: $color-dark-foreground;
            height: $bar-height;
        }

        &.disabled {
            background: lighten($color-border, 5%);
        }
    }

    &-thumb {
        & {
            @include border-radius($thumb-size * .5);
            position: absolute;
            width: $thumb-size;
            height: $thumb-size;
            border: 1px solid $color-input-border;
            background: $color-dark-foreground;
            margin-top: -$thumb-margin;
            margin-left: -$thumb-size * .5;
        }

        &.disabled {
            background: lighten($color-border, 5%);
        }

        &.focused {
            border-color: $color-theme-blue;
        }
    }
}

.disabled {
    pointer-events: none;
}