@layer components {
  .ui-flash {
    @apply w-full fixed;
    top: 5.5rem;
    z-index: calc(var(--stacking-context-page-meganav) - 10);
    transition: margin-top 200ms;
  }

  .ui-flash-message {
    @apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-2 opacity-0 relative;
    transition:
      opacity 200ms,
      transform 200ms,
      height 200ms 200ms,
      margin-top 200ms 200ms;
    transform: translateY(-200%) rotateX(-90deg);
  }

  /* dynamic content inside flash, can't add classes */
  .ui-flash-text a {
    @apply underline;
  }

  .ui-flash-message-enter {
    @apply opacity-100;
    transform: translateY(0) rotateX(0);
  }
}