/* The flash region (shared/_flash). The messages themselves are alerts — components/alert.css
   owns how they look; this file owns only what makes a flash a flash: where the region sits and
   the dismiss/fade behaviour flash_controller drives. */
@layer components {
  .flash-region {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-4);
  }
  .flash-region .flash {
    margin-top: var(--space-4);
  }

  .flash {
    transition: opacity var(--duration-normal) var(--ease-smooth);
  }
  .flash-body {
    flex: 1;
  }
  .flash-dismiss {
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease-smooth);
  }
  .flash-dismiss:hover {
    opacity: 1;
  }

  /* flash_controller's dismiss/auto-dismiss end state — the transition above fades it. */
  .flash.is-dismissed {
    opacity: 0;
  }
}