@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: var(--color-canvas);
    --flash-border-color: var(--color-negative);
    --flash-color: var(--color-negative);
  }

  .flash__message {
    flex: 1;
    min-inline-size: 0;
  }

  .flash__close {
    align-items: center;
    background: none;
    border: 0;
    border-radius: var(--radius);
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    margin-block: calc(var(--block-space-half) * -1);
    margin-inline-end: calc(var(--inline-space) * -1);
    min-block-size: 44px;
    min-inline-size: 44px;
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  @media (hover: hover) {
    .flash__close:hover {
      background-color: var(--color-surface);
      color: var(--color-ink);
    }
  }

  /* In the page flow, so a message pushes the page down and never covers
     the navigation above it. */
  .flash-container {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: var(--block-space-half);
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 48rem;
    padding: var(--block-space-half) var(--inline-space);
  }
}