/* Component – Background swatches */

.bg-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.bg-swatch {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  overflow: hidden;
  transition: border-color var(--speed);
}

.bg-swatch:hover {
  border-color: var(--text-muted);
}

.bg-swatch.active,
.bg-swatch.active:hover {
  border-color: var(--accent);
}