/* Colors come from the app tokens; the fallbacks are the dark theme. */
.ui-slider {
  --_text: var(--ui-text, #d6d6d6);
  --_dim: var(--ui-text-dim, #8a8a8a);
  --_line: var(--ui-line, #3a3a3a);
  --_field: var(--ui-field, #161616);
  --_accent: var(--ui-accent, #e04040);

  margin: 8px 0;
  color: var(--_text);
  user-select: none;
}

.ui-slider__head {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ui-slider__changed {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--_accent);
}

.ui-slider__changed[hidden] { display: none; }

.ui-slider__auto { margin-left: auto; }
.ui-slider__auto[hidden] { display: none; }

.ui-slider__body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
}

.ui-slider__range {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
  color: var(--_dim);
  font-size: 10px;
  line-height: 11px;
}

/* Positions on the track: --ui-at is 0..1. A tick is 1px wide, so the scale is 100% - 1px:
 * the tick at 1 stays inside the track, and the knob and the default mark center on the tick (+ 0.5px).
 *
 * Track from top to bottom (15px): ticks 0..3px, 1px gap, line 4..6px, 1px gap, default mark 11..15px.
 * The knob (0..10px) covers the tick at its value, so the knob itself marks the position.
 * The default mark stays below the knob and is visible when the knob is on the default value. */
.ui-slider__track {
  --_scale: calc(100% - 1px);

  position: relative;
  height: 15px;
  cursor: pointer;
  touch-action: none;
}

.ui-slider__track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 2px;
  background: var(--_line);
}

.ui-slider__tick {
  position: absolute;
  left: calc(var(--ui-at, 0) * var(--_scale));
  top: 0;
  width: 1px;
  height: 3px;
  background: var(--ui-slider-tick, #8a8a8a);
}

.ui-slider__default {
  position: absolute;
  left: calc(var(--ui-at, 0) * var(--_scale) + 0.5px);
  /* Triangle that points up to the line: the bottom border of an 8px box, visible part 11..15px. */
  top: 7px;
  margin-left: -4px;
  border: 4px solid transparent;
  border-bottom-color: var(--ui-slider-default, #8a8a8a);
}

.ui-slider__default[hidden] { display: none; }

.ui-slider__knob {
  position: absolute;
  left: calc(var(--ui-at, 0) * var(--_scale) + 0.5px);
  top: 0;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--ui-slider-knob, #d6d6d6);
}

.ui-slider__field {
  /* The middle of the field is on the line of the track. */
  margin-bottom: -1px;
  /* "99.99". The padding and the border come on top. */
  box-sizing: content-box;
  width: 5ch;
  /* 22px with the border. */
  height: 20px;
  min-width: 0;
  padding: 0 4px;
  text-align: right;
  color: var(--_text);
  background: var(--_field);
  border: 1px solid var(--_line);
  font: inherit;
}

.ui-slider.is-disabled,
.ui-slider.is-auto .ui-slider__scale {
  opacity: .45;
}

.ui-slider.is-disabled .ui-slider__track,
.ui-slider.is-auto .ui-slider__track {
  cursor: default;
}