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

.formFader {
    --fader-accent: var(--primary-500);
    --fader-strong: var(--primary-900);

    position: relative;
    display: block;
    height: 39px;
    border-radius: var(--radius-half);
    cursor: grab;
    outline: 0;
    touch-action: pan-y;
    user-select: none;

    &.isDragging {
        cursor: grabbing;
    }

    &.isDisabled {
        cursor: not-allowed;
        opacity: .45;
    }

    &.isReadonly {
        cursor: default;
    }
}

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

.formFaderTrack {
    position: absolute;
    inset: 0;
    background: var(--gray-50);
    background-clip: padding-box;
    border-radius: var(--radius-half);
    box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
    overflow: hidden;
    will-change: transform;
}

.formFaderFill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgb(from var(--fader-accent) r g b / .15);
    border: 1px solid rgb(from var(--fader-accent) r g b / .2);
    border-radius: var(--radius-half);
    transition: background-color 150ms var(--standard-curve);
}

.formFader:not(.isDisabled):not(.isDragging) {
    @include mixin.hover {
        .formFaderFill {
            background: rgb(from var(--fader-accent) r g b / .2);
        }
    }
}

.formFader.isDragging .formFaderFill {
    background: rgb(from var(--fader-accent) r g b / .25);
}

.formFaderBar {
    position: absolute;
    top: 50%;
    height: 21px;
    width: 4px;
    background: var(--fader-accent);
    border-radius: var(--radius-full);
    opacity: .85;
    translate: -50% -50%;
    scale: 1 1;
    transition: opacity 150ms var(--standard-curve), scale 150ms var(--standard-curve);

    &.isDodge {
        opacity: .3;
        scale: 1 .75;
    }

    &.isGrabbed {
        opacity: 1;
        scale: 1 1.2;
    }

    &.isFocus {
        opacity: 1;
        scale: 1 1.35;
    }
}

.formFaderTick {
    position: absolute;
    top: 50%;
    height: 3px;
    width: 3px;
    pointer-events: none;
    translate: -50% -50%;
}

.formFaderTickBase {
    position: absolute;
    inset: 0;
    background: rgb(from var(--foreground) r g b / .25);
    border-radius: var(--radius-full);
}

.formFaderTickFill {
    position: absolute;
    inset: 0;
    background: rgb(from var(--foreground) r g b / .6);
    border-radius: var(--radius-full);
}

.formFaderThumb {
    position: absolute;
    top: 0;
    height: 100%;
    width: 21px;
    padding: 0;
    background: none;
    border: 0;
    outline: 0;
    opacity: 0;
    translate: -50% 0;
}

.formFaderOverlay {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    inset: 0;
    padding: 0 12px;
    pointer-events: none;
}

// A clipped copy of the text on top of the base overlay: it is masked to the
// filled region, so wherever the value sits under the text the label/value
// read in the accent's strong (900) tone instead of the neutral foreground.
.formFaderOverlayFill {
    composes: formFaderOverlay;

    z-index: 2;

    .formFaderLabel,
    .formFaderValue,
    .formFaderIcon {
        color: var(--fader-strong);
    }
}

.formFaderIcon {
    flex: 0 0 auto;
    color: var(--foreground);
}

.formFaderIconLeading {
    composes: formFaderIcon;

    margin-right: 9px;
}

.formFaderIconTrailing {
    composes: formFaderIcon;

    margin-left: 9px;
}

.formFaderLabel {
    @include mixin.text(small);

    flex: 0 1 auto;
    min-width: 0;
    color: var(--foreground);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.formFaderValue {
    @include mixin.text(xsmall);

    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 12px;
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

// Vertical variant: a slim column that fills bottom (min) to top (max). Fills,
// bars, thumbs and ticks position via `bottom`; the label/value read rotated.
.formFader.isVertical {
    height: var(--flux-form-fader-length, 210px);
    width: 39px;
    touch-action: pan-x;

    .formFaderFill {
        top: auto;
        bottom: 0;
        width: 100%;
    }

    .formFaderBar {
        top: auto;
        left: 50%;
        height: 4px;
        width: 21px;
        translate: -50% 50%;

        &.isDodge {
            scale: .75 1;
        }

        &.isGrabbed {
            scale: 1.2 1;
        }

        &.isFocus {
            scale: 1.35 1;
        }
    }

    .formFaderThumb {
        top: auto;
        left: 0;
        height: 21px;
        width: 100%;
        translate: 0 50%;
    }

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

    .formFaderOverlay {
        flex-flow: column;
        padding: 12px 0;
    }

    .formFaderIconLeading {
        margin-right: 0;
        margin-bottom: 9px;
    }

    .formFaderIconTrailing {
        margin-left: 0;
        margin-top: 9px;
    }

    .formFaderLabel {
        writing-mode: vertical-rl;
    }

    .formFaderValue {
        margin-top: auto;
        margin-left: 0;
        padding-top: 12px;
        padding-left: 0;
        writing-mode: vertical-rl;
    }
}