/* Kole UI Mobile · Slider 样式 — 对齐移动端规格 §35
   滑动选择器：轨道可视高度只有 4px，但**整条热区高度是 44px**（触控最小边长）——
   直接点轨道上的任意位置也要能跳到该位置，不能要求用户精确抓住滑块。
   滑块（thumb）视觉 20px，按下/拖动时放大到 24px 作为「手指抓住了」的反馈。 */

.kole-m-slider {
  /* 组件级变量：业务侧可在容器上覆盖 */
  --kole-m-slider-thumb: 20px;         /* 滑块视觉直径 */
  --kole-m-slider-thumb-active: 24px;  /* 拖动中的滑块直径 */
  --kole-m-slider-track: 4px;          /* 轨道可视高度 */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--kole-space-12);
  width: 100%;
  padding: 0 var(--kole-m-gutter);
  background: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-family: inherit;
  font-size: var(--kole-m-font-size-body);
  line-height: 1.4;
  /* 注意：根元素**不写** cursor: pointer —— 数值文案是显示而不是控件，
     整条挂 pointer 会让它看起来可点（键盘可达性判据也会因此报「鼠标专用交互」）。
     可点的语义由 .kole-m-slider__rail（role="slider" + tabindex）承担。 */
  cursor: default;
  touch-action: pan-y;
}

/* 轨道热区：可视 4px 的轨道垂直居中在这条 44px 高的带子里 */
.kole-m-slider__rail {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: var(--kole-m-touch-target);
  cursor: pointer;
}

.kole-m-slider__track {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: var(--kole-m-slider-track);
  border-radius: calc(var(--kole-m-slider-track) / 2);
  background: var(--kole-color-border);
}

/* 选中段：从起点铺到滑块位置（宽度由 left/right 内联样式给出） */
.kole-m-slider__filled {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: var(--kole-color-brand);
}

/* 滑块：白底 + 品牌描边 + 投影，保证在浅色轨道上也看得清 */
.kole-m-slider__thumb {
  position: absolute;
  top: 50%;
  box-sizing: border-box;
  width: var(--kole-m-slider-thumb);
  height: var(--kole-m-slider-thumb);
  margin-top: calc(var(--kole-m-slider-thumb) / -2);
  margin-left: calc(var(--kole-m-slider-thumb) / -2);
  border: 2px solid var(--kole-color-brand);
  border-radius: 50%;
  background: var(--kole-color-card-bg);
  box-shadow: var(--kole-shadow-low);
  transition: width 150ms var(--kole-ease-standard), height 150ms var(--kole-ease-standard),
              margin 150ms var(--kole-ease-standard);
}

/* 状态 dragging：滑块放大（手指抓住的反馈），并在整条轨道上加一层浅底 */
.kole-m-slider.is-dragging .kole-m-slider__thumb {
  width: var(--kole-m-slider-thumb-active);
  height: var(--kole-m-slider-thumb-active);
  margin-top: calc(var(--kole-m-slider-thumb-active) / -2);
  margin-left: calc(var(--kole-m-slider-thumb-active) / -2);
}

.kole-m-slider.is-dragging .kole-m-slider__rail { background: var(--kole-color-brand-bg); }

/* 双滑块（mode=range）：两个滑块共用同一个类，位置由内联 left 区分 */
.kole-m-slider--range .kole-m-slider__thumb { background: var(--kole-color-card-bg); }

/* 数值显示：当前值跟在轨道右侧（宽度固定，避免拖动时文字宽度变化导致轨道抖动） */
.kole-m-slider__value {
  flex: 0 0 auto;
  min-width: 3em;
  text-align: end;
  font-variant-numeric: tabular-nums;
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
}

/* 变体 marks=with-marks：轨道上出现刻度点（只标位置，不写文案，避免小屏拥挤）。
   默认不渲染刻度点 —— 刻度是「有意义的等分点」而非装饰，没有它时轨道更干净。 */
.kole-m-slider__mark {
  display: none;
  position: absolute;
  top: 50%;
  width: 2px;
  height: 8px;
  margin-top: -4px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--kole-color-text-placeholder);
}

.kole-m-slider--marks .kole-m-slider__mark { display: block; }

/* 状态 disabled：整条置灰且不响应（滑块不再有描边） */
.kole-m-slider.is-disabled {
  cursor: not-allowed;
  color: var(--kole-color-text-disabled);
}

.kole-m-slider.is-disabled .kole-m-slider__thumb {
  border-color: var(--kole-color-text-disabled);
  background: var(--kole-color-disabled-bg);
}

.kole-m-slider.is-disabled .kole-m-slider__filled { background: var(--kole-color-text-disabled); }

.kole-m-slider.is-disabled .kole-m-slider__value { color: var(--kole-color-text-disabled); }

.kole-m-slider:focus-visible {
  outline: 2px solid var(--kole-color-focus-ring);
  outline-offset: -2px;
}