/*
 * 「音量」段落 —— volume.js 动态插进键位面板内容区（.ejs-km-bd）的最后一段
 * ---------------------------------------------------------------------------
 * 段落的外壳和排版直接复用 keymap.css 的全局类：
 *   .ejs-km-sec（小标题） .ejs-km-row（左右布局） .ejs-km-nm（左标签）
 * 这个文件只写它自己的工作控件：滑条、百分比、静音按钮、说明文字。
 *
 * 按钮样式是从 resolution.css 的 .ejs-res-apply 抄过来的 —— 同样不在
 * .ejs-km-ft 容器里，蹭不到 keymap.css 那条后代选择器。
 */

#ejs-vol-sec { margin-top: 2px; }

/* 标签不许被挤：.ejs-km-nm 默认 flex-shrink: 1，滑条的 flex-basis 是它自带的
   ~129px 宽度，两者一起超宽时先被压缩的是标签（「音量」会被截成半个字）。
   让滑条一个人承担伸缩（它有 min-width: 0 + flex-grow）。 */
#ejs-vol-sec .ejs-km-nm { flex: 0 0 auto; }

/* ---- 滑条 ---------------------------------------------------------------- */

.ejs-vol-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;              /* flex 子项默认 min-width:auto，会把行撑破 */
  height: 16px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  /* 「已填充」的进度：JS 往这个自定义属性里写百分比。
     这里给个默认值，JS 万一没跑，渐变至少是合法值（否则整条 background 作废）。 */
  --ejs-vol-pct: 100%;
}
.ejs-vol-range:focus { outline: 0; }          /* 别抢走画布的键盘焦点 */
.ejs-vol-range:disabled { opacity: 0.45; cursor: default; }

/* 轨道自己画：WebKit 没有 range-progress 这种伪元素，用渐变凑（两段同色分界） */
.ejs-vol-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(120, 190, 255, 0.85) var(--ejs-vol-pct),
    rgba(255, 255, 255, 0.18) var(--ejs-vol-pct));
}
.ejs-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;          /* (轨道 4px - 滑块 12px) / 2 */
  border: 0;
  border-radius: 50%;
  background: #fff;
}

/* Firefox 有现成的进度伪元素，不用渐变 */
.ejs-vol-range::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
}
.ejs-vol-range::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: rgba(120, 190, 255, 0.85);
}
.ejs-vol-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

/* 百分比：等宽数字，拖动时数字跳动不会把行宽顶来顶去 */
.ejs-vol-val {
  flex: 0 0 auto;
  min-width: 34px;
  text-align: right;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
}

/* ---- 静音按钮 ------------------------------------------------------------ */

.ejs-vol-mute {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 6px 0 0;
  padding: 6px 4px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ejs-vol-mute:hover { background: rgba(255, 255, 255, 0.18); }
.ejs-vol-mute:active { transform: scale(0.98); }
.ejs-vol-mute:focus { outline: 0; }
/* 静音中：按钮点亮成红色系，一眼能看出"现在是静的" */
.ejs-vol-mute.active {
  background: rgba(255, 140, 140, 0.3);
  border-color: rgba(255, 160, 160, 0.7);
}
.ejs-vol-mute.active:hover { background: rgba(255, 140, 140, 0.42); }
.ejs-vol-mute:disabled { opacity: 0.45; cursor: default; }

/* ---- 说明文字 ------------------------------------------------------------ */

.ejs-vol-hint {
  padding: 4px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #8fc7ff;
}

/* 窄屏（手机）：跟 keymap.css 的断点保持一致 */
@media (max-width: 520px) {
  .ejs-vol-val { min-width: 30px; font-size: 10px; }
  .ejs-vol-mute { font-size: 11px; }
}