@layer components {
  /* Messages after a redirect, dressed like the product page's alert panel:
     a soft tinted box, readable ink, and an icon carrying the colour. */
  .flash {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    margin-block-start: var(--block-space);
    margin-inline: auto;
    max-inline-size: var(--main-width);
    padding-inline: var(--inline-space-double);
  }

  .flash__message {
    --flash-accent: var(--color-primary);

    display: flex;
    align-items: flex-start;
    padding: 0.75rem var(--inline-space);
    border: 1px solid oklch(var(--lch-green-100));
    border-radius: var(--border-radius);
    background-color: var(--color-positive-subtle);
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 500;
    gap: 0.6rem;
    line-height: 1.25rem;

    /* One text line tall, so the icon centres on the first line. */
    .material-icons {
      display: flex;
      align-items: center;
      block-size: 1.25rem;
      color: var(--flash-accent);
      font-size: 1.25rem;
    }
  }

  .flash__message--alert {
    --flash-accent: var(--color-negative);

    border-color: oklch(var(--lch-red-200));
    background-color: var(--color-negative-subtle);
    color: oklch(var(--lch-red-700));
  }
}