@use '~flux/components/css/mixin';

.slider {
    position: relative;
    display: flex;
    margin: 6px;
    flex-flow: column;
    gap: 9px;
    touch-action: pan-y;

    &.isDisabled {
        cursor: not-allowed;
    }

    &.isDragging {
        cursor: grabbing;
    }
}

.sliderThumb {
    position: absolute;
    top: 50%;
    height: 24px;
    width: 24px;
    padding: 0;
    background: var(--surface);
    background-clip: padding-box;
    border: 1px solid var(--surface-stroke-out);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    cursor: grab;
    outline: 0;
    translate: -50% -50%;

    @include mixin.focus-ring-transition(2px);

    @include mixin.hover {
        background-color: var(--surface-hover);
    }

    &.isDisabled {
        background-color: var(--surface-disabled);
        box-shadow: none;
        pointer-events: none;
    }

    &.isDragging {
        box-shadow: var(--shadow-md);
        cursor: grabbing;
    }
}

.sliderTrack {
    position: relative;
    height: 12px;
    background: var(--gray-50);
    background-clip: padding-box;
    border-radius: var(--radius-half);
    box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
}

.sliderTrackValue {
    position: absolute;
    display: block;
    top: 0;
    height: inherit;
    background: var(--primary-600);
    border-radius: inherit;
}

.slider.isDisabled .sliderTrackValue {
    background: var(--gray-300);
}

.tick {
    @include mixin.text(2xsmall);

    position: absolute;
    left: calc(var(--position) * 100% - 1px);
    bottom: 0;
    height: 9px;
    width: 2px;
    background: var(--gray-300);
    border-radius: var(--radius-full);
    color: var(--foreground-prominent);
    font-weight: 600;
    pointer-events: none;
}

.tickLarge {
    composes: tick;

    :is(span) {
        position: relative;
        display: inline-block;
        translate: -50% -100%;
    }
}

.tickSmall {
    composes: tick;

    height: 6px;
    opacity: .5;
}

.ticks {
    position: relative;
    display: block;
    height: 21px;
}

// Vertical variant: the track runs bottom (min) to top (max). The cross-axis
// stays the horizontal one, so fills, thumbs and ticks position via `bottom`.
.slider.isVertical {
    flex-flow: row;
    height: var(--flux-form-slider-length, 210px);
    width: max-content;
    touch-action: pan-x;

    .sliderTrack {
        height: auto;
        width: 12px;
    }

    .sliderThumb {
        top: auto;
        left: 50%;
        translate: -50% 50%;
    }

    .sliderTrackValue {
        top: auto;
        left: 0;
        right: 0;
    }

    .ticks {
        height: auto;
        width: 21px;
    }

    .tick {
        left: auto;
        right: 0;
        bottom: calc(var(--position) * 100% - 1px);
        height: 2px;
        width: 9px;
    }

    .tickSmall {
        height: 2px;
        width: 6px;
    }

    .tickLarge :is(span) {
        translate: -100% -50%;
    }
}