@layer components {
  .flash {
    --flash-bg: var(--color-surface);
    --flash-color: var(--color-ink);
    --flash-border-color: oklch(var(--lch-ink-lighter));

    align-items: center;
    background-color: var(--flash-bg);
    border: 1px solid var(--flash-border-color);
    border-radius: var(--radius);
    color: var(--flash-color);
    display: flex;
    font-size: var(--text-small);
    gap: var(--inline-space);
    padding: var(--block-space-half) var(--inline-space);
    position: relative;
  }

  .flash--notice {
    --flash-bg: oklch(var(--lch-positive) / 0.1);
    --flash-border-color: var(--color-positive);
    --flash-color: var(--color-positive);
  }

  .flash--alert {
    --flash-bg: oklch(var(--lch-negative) / 0.1);
    --flash-border-color: var(--color-negative);
    --flash-color: var(--color-negative);
  }

  /* Flash container at the top of the main area */
  .flash-container {
    padding: var(--block-space-half) var(--inline-space);
    position: fixed;
    top: calc(var(--nav-height) + var(--safe-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-flash);
    inline-size: min(90%, 30rem);
  }
}