/* Figma, Alert (Frame 9): a pale tint card, a round coloured icon, title and body in ink.
   Colour is never the only signal; role=alert/status carries it for screen readers. */
@layer components {
  .flash {
    --flash-color: var(--color-info);
    --flash-background: var(--color-info-tint);

    padding: var(--block-space) var(--inline-space-double);
    font-size: var(--text-small);
    color: var(--color-text);
    background: var(--flash-background);
    border-radius: var(--radius-large);

    & ul { padding-inline-start: var(--inline-space-double); }
  }

  .flash--notice {
    --flash-color: var(--color-positive);
    --flash-background: var(--color-positive-tint);
  }

  .flash--alert {
    --flash-color: var(--color-negative);
    --flash-background: var(--color-negative-tint);
  }
}

/* Alert and flash share one component: icon, optional title, body. */
@layer components {
  .flash {
    display: flex;
    gap: var(--inline-space);
    align-items: start;
  }

  .flash__body { display: flex; flex-direction: column; gap: 0.125rem; padding-block-start: 0.125rem; }

  .flash__icon {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    font-size: var(--text-x-small);
    font-weight: 700;
    color: var(--color-text-reversed);
    background: var(--flash-color);
    border-radius: var(--radius-pill);
  }

  .flash__title { font-weight: 700; }

  .flash--warning {
    --flash-color: var(--color-warning);
    --flash-background: var(--color-warning-tint);
  }
}