/* Component: Color Strip (shared swatch row) */
.color-strip {
  display: flex;
  flex-direction: column;
  gap: var(--pfse-spacing-2);
  padding: var(--pfse-spacing-2) var(--pfse-spacing-3);
  background: var(--pfse-surface-secondary);
  border: 1px solid var(--pfse-border-primary);
  border-radius: var(--pfse-radius-md);
}

.color-strip--compact {
  padding: var(--pfse-spacing-1) var(--pfse-spacing-2);
  gap: var(--pfse-spacing-1);
}

.color-strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pfse-spacing-2);
}

.color-strip--compact .color-strip__row {
  gap: var(--pfse-spacing-1);
}

.color-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--pfse-spacing-1);
}

.color-strip__swatch,
.picker-strip .swatch,
.color-strip .swatch {
  width: var(--pfse-control-height-lg);
  height: var(--pfse-control-height-lg);
  min-width: var(--pfse-control-height-lg);
  min-height: var(--pfse-control-height-lg);
  border-radius: 999px;
  border: 2px solid var(--pfse-border-primary);
  background: var(--pfse-surface-primary);
  cursor: pointer;
  padding: 0;
  transition:
    transform var(--pfse-anim-instant) var(--pfse-ease-standard),
    border-color var(--pfse-anim-micro) var(--pfse-ease-standard);
}

.color-strip__swatch:hover,
.picker-strip .swatch:hover,
.color-strip .swatch:hover {
  transform: scale(1.02);
  border-color: var(--pfse-border-secondary);
}

.color-strip__swatch:focus-visible,
.picker-strip .swatch:focus-visible,
.color-strip .swatch:focus-visible {
  outline: var(--pfse-focus-ring-width) solid var(--pfse-focus-ring-color);
  outline-offset: 2px;
}

.color-strip__remove {
  min-width: var(--pfse-control-height-sm);
  height: var(--pfse-control-height-sm);
  padding: 0 var(--pfse-spacing-1);
  border-radius: var(--pfse-radius-sm);
  border: 1px solid var(--pfse-border-primary);
  background: var(--pfse-surface-primary);
  color: var(--pfse-text-high);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 80ms ease;
}

.color-strip__remove:hover {
  background: var(--pfse-surface-secondary);
  border-color: var(--pfse-border-secondary);
}

.color-strip__remove:active {
  transform: scale(0.98);
}

.color-strip__remove:focus-visible {
  outline: var(--pfse-focus-ring-width) solid var(--pfse-focus-ring-color);
  outline-offset: 2px;
}

.color-strip__caption {
  font-size: var(--pfse-font-size-body);
}