/*
 * The Product Swatches block (src/Blocks/ProductSwatches.php): a row of round swatches in `xs`, each a 1.5rem target
 * (WCAG 2.5.8) around its colour, ringed so a light colour keeps its edge, as the boards' swatchDots() draws them. The
 * colour fills the target but for the chosen ring (2px) and a 2px gap on each side (the inset), so swatches without a
 * ring sit close together (the targets cannot) and the ring keeps its gap; the row starts an inset early, so the first
 * colour lines up with the card's text and its target reaches past it. A term with an image (a pattern, a material)
 * shows it cropped to the circle; swatches beyond the fifth (or the block's `max`) are a muted count linking to the
 * product. Where the shopper can choose
 * (`lanternwp-swatches--choices`, buttons) the chosen one is ringed in `contrast`, twice as thick, as on the product
 * page, and a sold-out one is faded; hover, press and focus are the control role's, in the theme
 * (docs/design-tokens.html#roles). The theme's card places the row beside the rating.
 */
.lanternwp-swatches {
  --lanternwp-swatch-inset: 4px;

  display: flex;
  margin-inline-start: calc(-1 * var(--lanternwp-swatch-inset));
  align-items: center;
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1;
}

.lanternwp-swatches__swatch {
  flex: none;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
}

button.lanternwp-swatches__swatch {
  cursor: pointer;
}

.lanternwp-swatches__colour {
  inline-size: calc(1.5rem - 2 * var(--lanternwp-swatch-inset));
  block-size: calc(1.5rem - 2 * var(--lanternwp-swatch-inset));
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
}

.lanternwp-swatches__swatch[aria-pressed='true'] {
  border-width: 2px;
  border-color: var(--wp--preset--color--contrast);
}

.lanternwp-swatches__swatch[aria-disabled='true'] {
  border-color: var(--wp--custom--color--disabled);
  cursor: not-allowed;

  & .lanternwp-swatches__colour {
    opacity: 0.35;
  }
}

.lanternwp-swatches__more {
  margin-inline-start: var(--wp--preset--spacing--10);
  color: var(--wp--preset--color--muted);
  text-decoration: none;
}

/*
 * The status after the button of a card that adds the value chosen here (src/Cards/CardCart.php): read out when the
 * variation is added, while the mini-cart opens to show it; shown under the button when it could not be added.
 */
.lanternwp-card-cart {
  display: block;
  font-size: var(--wp--preset--font-size--xs);
  line-height: var(--wp--custom--line-height--snug);

  &:not(.is-error) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  &.is-error {
    margin-block-start: var(--wp--preset--spacing--20);
    color: var(--wp--preset--color--sale);
  }
}