/*
 * Preset color-swatch palette for the geometry "map color" picker on
 * the case-property authoring modal (issue #39). Circular buttons
 * arranged by flex — each one's background-color is inlined by the
 * template so swatches inherit the list defined on the Ruby side.
 *
 * The `--selected` modifier surfaces the active swatch with an
 * outline-ring that picks up the brand primary token.
 */

.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--tblr-border-color);
  padding: 0;
  cursor: pointer;
  transition: box-shadow 100ms ease, transform 60ms ease;
}

.color-swatch:hover {
  transform: scale(1.08);
}

.color-swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), 0.35);
}

.color-swatch--selected {
  box-shadow:
    0 0 0 2px var(--tblr-bg-surface),
    0 0 0 4px var(--tblr-primary);
}