/*
 * 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;
}

.swatch-picker__label {
  display: block;
  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;
  list-style: none;
  padding: 0;
}

.swatch-picker__swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.swatch-picker__swatch--selected {
  border: 2px solid var(--color-ink-light);
}

.swatch-picker__swatch--slate   { background-color: var(--color-border-strong); }
.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--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;
}