/* 色盘（简易 / 豪华）和画画用的颜色条。 */
.cp {
  display: flex;
  flex-direction: column;
  width: 288px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  color: var(--ink);
  font-size: var(--text-small);
}

.cp > * + * {
  margin-top: 10px;
}

.cp-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 8px;
}

.cp-tab {
  min-height: 36px;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
}

.cp-tab.is-on {
  background: var(--bar);
  border-color: var(--bar);
  color: var(--on-dark);
}

.cp-panes {
  display: grid;
}

.cp-panes > .cp-pane {
  grid-area: 1 / 1;
}

.cp-pane {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cp-pane > * + * {
  margin-top: 10px;
}

.cp-picker {
  align-self: center;
}

.cp-area {
  position: relative;
  touch-action: none;
  cursor: crosshair;
}

.cp-wheel-canvas {
  display: block;
}

.cp-square {
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
}

.cp-marker {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #111, inset 0 0 0 1px #111;
  pointer-events: none;
}

.cp-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 56px;
  grid-gap: 8px;
  align-items: center;
}

.cp-row-plain {
  grid-template-columns: 40px minmax(0, 1fr);
}

.cp-row-name {
  color: var(--ink-2);
}

.cp-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 16px;
  margin: 0;
  padding: 0;
  border: var(--border-w) solid var(--line);
  border-radius: 8px;
  touch-action: none;
}

.cp-range::-webkit-slider-runnable-track {
  height: 12px;
  background: transparent;
}

.cp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -6px;
  border: var(--border-w) solid var(--line);
  border-radius: 50%;
  background: #fff;
}

.cp-range::-moz-range-track {
  height: 12px;
  background: transparent;
}

.cp-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: var(--border-w) solid var(--line);
  border-radius: 50%;
  background: #fff;
}

.cp-input {
  min-width: 0;
  width: 100%;
  min-height: 36px;
  padding: 0 4px;
  text-align: center;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--field);
}

.cp-input:focus {
  border-color: var(--ink);
}

.cp-hexrow {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 30px;
  grid-gap: 8px;
  align-items: center;
}

.cp-group {
  display: flex;
  flex-direction: column;
}

.cp-label {
  margin-bottom: 6px;
  color: var(--ink-2);
}

.cp-grid {
  display: grid;
  grid-template-columns: repeat(6, 30px);
  grid-gap: 8px 0;
  justify-content: space-between;
}

.cp-swatch,
.cp-preview {
  width: 30px;
  height: 30px;
  padding: 0;
  border: var(--border-w) solid var(--line);
  border-radius: 50%;
}

.cp-swatch.is-selected {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--line);
}

.cp-swatch-empty {
  display: block;
  border-style: dashed;
  border-color: var(--ink-3);
  background: transparent;
  cursor: default;
}

.cp-preview {
  pointer-events: none;
}

.cp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cp-clear {
  min-height: 36px;
  padding: 0 12px;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
}

.cp-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  grid-gap: 6px;
}

.cp-bottom .cp-clear {
  min-width: 0;
  padding: 0 4px;
  white-space: nowrap;
}

.cp-confirm {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cp-dot {
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  border: 2px solid var(--line);
  border-radius: 50%;
}

.cp-dot.is-empty {
  border-style: dashed;
}

.cp-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.cp-recent-head .cp-label {
  margin-bottom: 0;
}

.cp-mini-row {
  display: flex;
}

.cp-mini {
  min-height: 28px;
  margin-left: 4px;
  padding: 0 8px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 12px;
  white-space: nowrap;
}

.cp-mini[disabled] {
  border-color: var(--ink-3);
  color: var(--ink-3);
  cursor: default;
}

.cp-swatch.is-pinned {
  position: relative;
}

.cp-swatch.is-pinned::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--line);
}

/* 简易色的圆形颜色按钮 */
.color-button {
  position: relative;
  width: var(--touch);
  height: var(--touch);
  border: var(--border-w) solid var(--line);
  border-radius: 50%;
  background: var(--field);
}

.color-button.is-empty {
  border-style: dashed;
}

.color-button.is-open {
  box-shadow: 0 0 0 3px var(--accent);
}

/* 画画用的颜色条：第一格透明当橡皮，然后是记忆色，最后一格圆圈加号。 */
.color-bar {
  display: flex;
  align-items: center;
  min-width: 0;
}

.color-list {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--gap-1);
}

.color-list > * {
  margin-right: var(--gap-2);
}

.color-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--touch);
  height: var(--touch);
  border: var(--border-w) solid var(--line);
  border-radius: 50%;
  background: var(--field);
  color: var(--ink);
}

.color-chip.is-on {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--line);
}

.color-chip .pin {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--line);
}

.add-chip {
  margin: 0 var(--gap-1);
  font-size: calc(var(--u) * 6);
  line-height: 1;
}

.eraser-chip {
  background-color: #ffffff;
  background-image: linear-gradient(45deg, #c9c9c9 25%, transparent 25%, transparent 75%, #c9c9c9 75%), linear-gradient(45deg, #c9c9c9 25%, transparent 25%, transparent 75%, #c9c9c9 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}

/* 豪华色盘弹窗里的两栏 */
.picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gap-3);
}

.stack {
  display: grid;
}

.stack > * {
  grid-area: 1 / 1;
}

.stack > .is-hidden {
  visibility: hidden;
}

.swatch-pane > * + * {
  margin-top: var(--gap-2);
}