.flash {
  align-items: center;
  animation: appear-then-fade 3s 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
  background-color: rgb(from var(--color-text) r g b / 0.85);
  border: 1px solid rgb(from var(--color-text) r g b / 0.15);
  border-radius: var(--rounded-lg);
  box-shadow: 0 2px 15px rgb(from var(--color-text) r g b / 0.08);
  color: var(--color-text-reversed);
  display: flex;
  font-size: var(--text-sm);
  font-weight: 500;
  gap: var(--size-2);
  justify-content: center;
  letter-spacing: 0.025em;
  margin-block-start: var(--flash-position, 0);
  margin-inline: auto;
  max-width: 90%;
  padding: var(--size-3) var(--size-4);
  transform: translateY(var(--size-4));
  width: max-content;
  z-index: 1000 !important;

  [data-turbo-preview] & {
    display: none;
  }
}

.flash--extended {
  animation-name: appear-then-fade-extended;
  animation-duration: 12s;
}

@keyframes appear-then-fade {
  0%,
  100% {
    opacity: 0;
  }
  5%,
  60% {
    opacity: 1;
  }
}

@keyframes appear-then-fade-extended {
  0%,
  100% {
    opacity: 0;
  }
  2%,
  90% {
    opacity: 1;
  }
}

.flash--alert {
  --color-text: rgb(220 38 38);
  background-color: rgb(254 242 242);
  border-color: rgb(254 226 226);
  color: rgb(185 28 28);
}

.flash--notice {
  --color-text: rgb(22 163 74);
  background-color: rgb(240 253 244);
  border-color: rgb(220 252 231);
  color: rgb(21 128 61);
}