/* Kole UI Mobile · ColorPicker 样式 — 对齐移动端规格 §45
   颜色选择器：预设色板 + 当前色显示。色板里的色值是**数据**（由宿主传入 presets），
   本文件不出现任何 hex —— 每个色块的背景由行内 style 写出，组件样式只负责尺寸、圆角、
   选中环与文字色（全部走 --kole-* / --kole-m-* 令牌）。
   选中态用「外环 + 放大」表达，不靠色块自身颜色差异（浅色块上看不出高亮）。 */

.kole-m-colorpicker {
  /* 组件级变量：业务侧可在容器上覆盖 */
  --kole-m-colorpicker-swatch-size: 32px;                 /* 色块视觉尺寸 */
  --kole-m-colorpicker-gap: var(--kole-space-12);         /* 色块间距 */
  --kole-m-colorpicker-columns: 6;                        /* 每行色块数 */
  --kole-m-colorpicker-radius: var(--kole-radius-base);   /* 色块圆角 */
  /* 当前色：**由宿主以行内自定义属性传入**（色值是数据，样式表里不出现 hex）。
     业务侧通常写 style="--kole-m-colorpicker-current: #RRGGBB"，或用 JS setProperty 更新。 */
  --kole-m-colorpicker-current: var(--kole-color-border);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--kole-space-12);
  width: 100%;
  background: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-family: var(--kole-font-family);
  font-size: var(--kole-m-font-size-body);
  line-height: 1.4;
}

.kole-m-colorpicker__mask {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--kole-color-mask);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--kole-m-duration-slide) var(--kole-m-ease-slide);
}

.kole-m-colorpicker__mask.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* 变体 mode=swatch：只有色板，没有任何自定义入口 */
.kole-m-colorpicker--swatch .kole-m-colorpicker__custom { display: none; }

/* 变体 mode=custom：色板之后追加自定义色值输入 */
.kole-m-colorpicker--custom .kole-m-colorpicker__custom { display: flex; }

/* 变体 round=true：色块与当前色圆点都用圆形（与圆点式主题选择器一致） */
.kole-m-colorpicker--round .kole-m-colorpicker__swatch,
.kole-m-colorpicker--round .kole-m-colorpicker__dot { border-radius: 50%; }

/* 变体 showValue=false：不显示色值文字，只留色块（空间紧张时用） */
.kole-m-colorpicker--no-value .kole-m-colorpicker__value { display: none; }

/* 顶部：当前色圆点 + 色值文字 —— 这是「当前色显示」的落点 */
.kole-m-colorpicker__current {
  display: flex;
  align-items: center;
  gap: var(--kole-space-8);
  min-height: var(--kole-m-touch-target);
}

.kole-m-colorpicker__dot {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border: 1px solid var(--kole-color-border);
  border-radius: var(--kole-m-colorpicker-radius);
  background: var(--kole-m-colorpicker-current);
}

.kole-m-colorpicker__value {
  color: var(--kole-color-text-body);
  font-family: var(--kole-font-family-num);
  font-size: var(--kole-m-font-size-label);
}

.kole-m-colorpicker__caption {
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
}

/* 色板：定列数网格，色块在各列内居中（375px 与 320px 下都不横向溢出） */
.kole-m-colorpicker__swatches {
  display: grid;
  grid-template-columns: repeat(var(--kole-m-colorpicker-columns), 1fr);
  gap: var(--kole-m-colorpicker-gap);
  width: 100%;
}

/* 色块：无文字（颜色本身就是语义，色值由 aria-label 播报），
   背景色由宿主以行内自定义属性传入（`--kole-m-colorpicker-swatch`）——
   **数据色不进样式表**，组件样式表里没有任何 hex。 */
.kole-m-colorpicker__swatch {
  box-sizing: border-box;
  justify-self: center;
  width: var(--kole-m-colorpicker-swatch-size);
  height: var(--kole-m-colorpicker-swatch-size);
  padding: 0;
  margin: 0;
  border: 1px solid var(--kole-color-border);
  border-radius: var(--kole-m-colorpicker-radius);
  background: var(--kole-m-colorpicker-swatch);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--kole-duration-fast) var(--kole-ease-standard);
}

.kole-m-colorpicker__swatch:active:not(:disabled) { transform: scale(0.94); }

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

/* 状态 selected：外环 + 放大（形状差异，浅色块上也读得出）
   外环用 box-shadow 画在色块之外，不占用网格尺寸 */
.kole-m-colorpicker__swatch.is-selected {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px var(--kole-color-card-bg), 0 0 0 4px var(--kole-color-brand);
}

.kole-m-colorpicker__swatch[aria-checked="true"] {
  box-shadow: 0 0 0 2px var(--kole-color-card-bg), 0 0 0 4px var(--kole-color-brand);
}

/* 状态 disabled：整块置灰且不响应 */
.kole-m-colorpicker__swatch:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.kole-m-colorpicker__swatch:disabled:active { transform: none; }

.kole-m-colorpicker.is-disabled .kole-m-colorpicker__value,
.kole-m-colorpicker.is-disabled .kole-m-colorpicker__caption { color: var(--kole-color-text-disabled); }

/* 自定义区（mode=custom）：色值输入 + 应用按钮 */
.kole-m-colorpicker__custom {
  display: none;
  align-items: center;
  gap: var(--kole-space-8);
  min-height: var(--kole-m-touch-target);
}

.kole-m-colorpicker__input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  min-height: var(--kole-m-touch-target);
  padding: 0 var(--kole-space-12);
  border: 1px solid var(--kole-color-border);
  border-radius: var(--kole-radius-base);
  background: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-family: var(--kole-font-family-num);
  font-size: var(--kole-m-font-size-label);
}

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

/* 色值非法时置灰提示（不发明「自动纠正」） */
.kole-m-colorpicker__input.is-invalid {
  border-color: var(--kole-color-error);
  color: var(--kole-color-error);
}

.kole-m-colorpicker__apply {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: var(--kole-m-touch-target);
  padding: 0 var(--kole-space-16);
  border: 1px solid var(--kole-color-brand);
  border-radius: var(--kole-radius-base);
  background: var(--kole-color-brand);
  color: var(--kole-color-text-inverse);
  font-family: inherit;
  font-size: var(--kole-m-font-size-label);
  cursor: pointer;
  touch-action: manipulation;
}

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

.kole-m-colorpicker__apply:disabled {
  border-color: var(--kole-color-border);
  background: var(--kole-color-disabled-bg);
  color: var(--kole-color-text-disabled);
  cursor: not-allowed;
}

.kole-m-colorpicker__error {
  color: var(--kole-color-error);
  font-size: var(--kole-m-font-size-label);
}

/* 演示页触发器（非组件交付样式） */
.kole-m-colorpicker__trigger {
  box-sizing: border-box;
  min-height: var(--kole-m-touch-target);
  padding: 0 var(--kole-m-gutter);
  border: 1px solid var(--kole-color-border);
  border-radius: var(--kole-radius-base);
  background: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-family: inherit;
  font-size: var(--kole-m-font-size-label);
  cursor: pointer;
  touch-action: manipulation;
}

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