/* Theme Builder Color panel — structured controls over the draft config.
   The container, section headings, and badges come from the shared Accordion
   (ThemeFields); this module styles only the color-specific bits — swatch rows,
   gradient/scheme previews, and the dropdown-option previews. */

.hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.caret {
  color: var(--text-secondary);
  margin-left: var(--space-3);
}

/* Editable swatch rows (palette colors / gradient stops) wrap into a grid. */
.swatches {
  display: flex;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  flex-wrap: wrap;
}

/* One swatch: a ColorField (swatch + hex) with its remove. */
.swatchUnit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* The remove is quiet until the row is hovered or holds focus. */
.swatchRemove {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.swatchUnit:hover .swatchRemove,
.swatchUnit:focus-within .swatchRemove {
  opacity: 1;
}

.gradientPreview {
  width: 96px;
  height: 24px;
  flex: 0 0 auto;
  border: var(--border-width) solid var(--border-strong);
}

/* Dropdown-option previews: a swatch strip (categorical) / gradient bar. */
.optStrip {
  display: inline-flex;
  width: 84px;
}
.optSwatch {
  flex: 1 1 0;
  height: 14px;
  min-width: 4px;
}
.optGradient {
  display: inline-block;
  width: 84px;
  height: 14px;
  border: var(--border-width) solid var(--border);
}

/* Mini current-value preview inside a SelectControl trigger. */
.triggerPreview {
  display: inline-flex;
  margin-right: var(--space-2);
}
.triggerPreview .optSwatch {
  width: 6px;
  flex: 0 0 6px;
  height: 14px;
}
