@layer components {
  .flash {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    z-index: 10;
    padding-top: var(--block-space);
    transition: transform 300ms ease-out;
  }

  .flash.flash--visible {
    transform: translateX(-50%) translateY(0);
  }

  .flash-inner {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space) var(--inline-space-double);
    border-radius: 50px;
    font-size: var(--text-medium);
    box-shadow: 0 4px 16px color-mix(in oklch, var(--color-ink) 10%, transparent);
  }

  /* Notice (success) styling */
  .flash--notice .flash-inner {
    background: var(--color-positive-soft);
    border: 1px solid var(--color-positive);
    color: var(--color-ink);
  }

  /* Alert (error) styling */
  .flash--alert .flash-inner {
    background: var(--color-negative-soft);
    border: 1px solid var(--color-negative);
    color: var(--color-ink);
  }

  /* Inline form errors (no .flash-inner wrapper) */
  .flash--error {
    position: static;
    transform: none;
    padding: var(--block-space);
    margin-block-end: var(--block-space);
    background: var(--color-negative-soft);
    border: 1px solid var(--color-negative);
    border-radius: 4px;
    color: var(--color-ink);
  }

  /* Inline warning banner */
  .flash--warning {
    position: static;
    transform: none;
    padding: var(--block-space);
    margin-block-end: var(--block-space);
    background: var(--color-warning-soft);
    border: 1px solid var(--color-warning);
    border-radius: 4px;
    color: var(--color-ink);
  }

  .flash--warning a {
    font-weight: 600;
  }

  .flash-message {
    flex: 1;
  }

  .flash-dismiss {
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--inline-space-half);
    color: inherit;
    opacity: 0.6;
    font-size: 1.25em;
    line-height: 1;
  }

  .flash-dismiss:hover {
    opacity: 1;
  }
}