/* DetailSlider (docs/ux-shape.md entry 13): the one control for how terse or how rich a view of one
   value is. Compact enough to sit in a toolbar cluster beside the trade-mode-switcher groups, about
   as tall as their buttons: a thin track with a round thumb, the stops' names under it.

   The native range is restyled rather than left to the browser so its thumb has a known width:
   each tick label is placed at the thumb's centre for its stop, which is
   thumb/2 + (track - thumb) * index / last, and that only lines up if the thumb is the width this
   file says it is. --last (the highest stop index) is set on the root and --i on each tick by
   DetailSlider.razor. */

.detail-slider {
    --detail-thumb: var(--cpd-space-md);
    --detail-track: var(--cpd-space-xs);
    box-sizing: content-box;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--cpd-space-xs);
    width: calc(max(var(--last), 2) * var(--cpd-space-2xl) + var(--detail-thumb));
    padding: 0 var(--cpd-space-sm);
    vertical-align: middle;
}

.detail-slider-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--detail-thumb);
    margin: 0;
    background: transparent;
    cursor: pointer;
}

.detail-slider-input:focus-visible {
    outline: none;
}

.detail-slider-input::-webkit-slider-runnable-track {
    height: var(--detail-track);
    background: var(--cpd-border-strong);
    border-radius: var(--cpd-radius-pill);
}

.detail-slider-input::-moz-range-track {
    height: var(--detail-track);
    background: var(--cpd-border-strong);
    border-radius: var(--cpd-radius-pill);
}

.detail-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--detail-thumb);
    height: var(--detail-thumb);
    margin-top: calc((var(--detail-track) - var(--detail-thumb)) / 2);
    background: var(--cpd-gold);
    border: none;
    border-radius: 50%;
    transition: box-shadow var(--cpd-transition-fast);
}

.detail-slider-input::-moz-range-thumb {
    width: var(--detail-thumb);
    height: var(--detail-thumb);
    background: var(--cpd-gold);
    border: none;
    border-radius: 50%;
    transition: box-shadow var(--cpd-transition-fast);
}

.detail-slider-input:hover::-webkit-slider-thumb,
.detail-slider-input:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 var(--detail-track) var(--cpd-focus);
}

.detail-slider-input:hover::-moz-range-thumb,
.detail-slider-input:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 var(--detail-track) var(--cpd-focus);
}

.detail-slider-ticks {
    position: relative;
    height: calc(var(--cpd-text-0) * 1.3);
}

.detail-slider-tick {
    position: absolute;
    top: 0;
    left: calc(var(--detail-thumb) / 2 + (100% - var(--detail-thumb)) * var(--i) / max(var(--last), 1));
    transform: translateX(-50%);
    color: var(--cpd-text-subtle);
    font-size: var(--cpd-text-0);
    line-height: 1.3;
    white-space: nowrap;
    user-select: none;
}

.detail-slider-tick.active {
    color: var(--cpd-text);
    font-weight: 600;
}