.swatch {
  display:          block;
  width:            2rem;
  height:           2rem;
  flex-shrink:      0;
  border-radius:    9999px;
  border:           1px solid var(--ovelia-colors-semantic-border);
  padding:          0;
  cursor:           pointer;
  background-color: var(--swatch-color, var(--ovelia-colors-semantic-surface-overlay));
  transition:       box-shadow 0.15s;
  text-decoration:  none;
}

.swatch:hover,
.swatch--selected,
.swatch.is-active,
.swatch:focus-visible {
  box-shadow: 0 0 0 2px var(--ovelia-colors-semantic-text);
  outline:    none;
}