/*
 * Pickers — colour and icon pickers in app/components/ui/form/.
 * The icon picker is the colour picker with images instead of swatches.
 *
 * Note: the colour-picker Stimulus controller toggles the
 * `swatch-picker__swatch--selected` modifier on the selected swatch.
 */

.swatch-picker {
  margin-block-start: 1.5rem;
  padding: 0;
  border: 0;
}

.swatch-picker__label {
  display: block;
  margin-block-end: 0.5rem;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-ink);
}

@media (min-width: 1024px) {
  .swatch-picker__label { font-size: 1rem; }
}

.swatch-picker__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.swatch-picker__swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid color-mix(in oklch, var(--color-border-strong) 45%, transparent);
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.swatch-picker__swatch:hover {
  transform: translateY(-1px);
}

.swatch-picker__swatch:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.swatch-picker__swatch--selected {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--color-ink-light);
}

.swatch-picker__swatch--slate   { background-color: var(--color-border-strong); }
.swatch-picker__swatch--gray    { background-color: var(--color-ink-lighter); }
.swatch-picker__swatch--black   { background-color: var(--color-ink); }
.swatch-picker__swatch--red     { background-color: rgb(var(--palette-red-300)); }
.swatch-picker__swatch--orange  { background-color: rgb(var(--palette-orange-300)); }
.swatch-picker__swatch--amber   { background-color: rgb(var(--palette-amber-300)); }
.swatch-picker__swatch--yellow  { background-color: rgb(var(--palette-yellow-300)); }
.swatch-picker__swatch--lime    { background-color: rgb(var(--palette-lime-300)); }
.swatch-picker__swatch--green   { background-color: rgb(var(--palette-green-300)); }
.swatch-picker__swatch--emerald { background-color: rgb(var(--palette-emerald-300)); }
.swatch-picker__swatch--teal    { background-color: rgb(var(--palette-teal-300)); }
.swatch-picker__swatch--cyan    { background-color: rgb(var(--palette-cyan-300)); }
.swatch-picker__swatch--sky     { background-color: rgb(var(--palette-sky-300)); }
.swatch-picker__swatch--blue    { background-color: rgb(var(--palette-blue-300)); }
.swatch-picker__swatch--indigo  { background-color: rgb(var(--palette-indigo-300)); }
.swatch-picker__swatch--violet  { background-color: rgb(var(--palette-violet-300)); }
.swatch-picker__swatch--purple  { background-color: rgb(var(--palette-purple-300)); }
.swatch-picker__swatch--fuchsia { background-color: rgb(var(--palette-fuchsia-300)); }
.swatch-picker__swatch--pink    { background-color: rgb(var(--palette-pink-300)); }
.swatch-picker__swatch--rose    { background-color: rgb(var(--palette-rose-300)); }

.swatch-picker--icons .swatch-picker__swatch {
  /* Icon picker swatches have no bg colour — the image is the swatch.   */
  background-color: transparent;
}

.swatch-picker__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}