@layer components {

  /* Base
  /* ------------------------------------------------------------------------ */

  .flash {
    --flash-color: var(--color-ink-muted);

    background-color: color-mix(in oklch, var(--flash-color) 10%, var(--color-canvas));
    border: 1px solid color-mix(in oklch, var(--flash-color) 35%, var(--color-canvas));
    border-radius: var(--border-radius);
    color: var(--color-ink);
    font-size: var(--text-small);
    margin-block-end: var(--block-space);
    padding-block: var(--block-space-half);
    padding-inline: var(--block-space);
  }

  /* Variants
  /* ------------------------------------------------------------------------ */

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

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

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