@keyframes flashFadeIO {
  0% {
    opacity: 0;
    transform: translate(-50%, -10px);
  }

  10% {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  90% {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -10px);
    visibility: hidden;
  }
}

.flash {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-block-end: var(--space-md);
  position: fixed;
  inset-block-start: calc(var(--layout-app-topnav-height, 4rem) + var(--space-md));
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 100;
  box-shadow: var(--shadow-md);
  max-inline-size: 90vw;
  pointer-events: none;
  animation: flashFadeIO 4s ease forwards;

  &[data-variant="notice"] {
    background-color: rgb(15 118 110 / 0.08);
    color: var(--color-primary);
    border: 1px solid rgb(15 118 110 / 0.2);
  }

  &[data-variant="alert"] {
    background-color: rgb(185 28 28 / 0.08);
    color: var(--color-danger);
    border: 1px solid rgb(185 28 28 / 0.2);
  }
}