.flash {
  --flash-accent: var(--pehuen-primary-600, var(--green-600));
  --flash-duration: 3s;
  align-items: flex-start;
  animation: flash-enter-exit var(--flash-duration) 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
  background-color: color-mix(in srgb, var(--color-surface) 94%, var(--flash-accent) 6%);
  border: 1px solid color-mix(in srgb, var(--flash-accent) 28%, var(--color-border) 72%);
  border-radius: 0;
  box-shadow: 0 12px 28px rgb(from var(--color-text) r g b / 0.12), 0 2px 6px rgb(from var(--color-text) r g b / 0.08);
  color: var(--color-text);
  display: flex;
  font-size: var(--text-sm);
  font-weight: 500;
  gap: var(--size-3);
  inline-size: min(26rem, calc(100vw - var(--size-6)));
  inset-block-end: auto;
  inset-block-start: calc(var(--size-3) + env(safe-area-inset-top));
  inset-inline-end: calc(var(--size-3) + env(safe-area-inset-right, 0px));
  inset-inline-start: auto;
  margin: 0;
  max-inline-size: calc(100vw - var(--size-6));
  overflow: hidden;
  padding: var(--size-4) var(--size-5) var(--size-5);
  position: fixed;
  transform: translateX(calc(100% + var(--size-4)));
  z-index: 1000 !important;

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

.flash__icon {
  align-items: center;
  background-color: color-mix(in srgb, var(--flash-accent) 12%, transparent);
  border-radius: var(--rounded-full);
  color: var(--flash-accent);
  display: inline-flex;
  flex: 0 0 auto;
  block-size: var(--size-8);
  inline-size: var(--size-8);
  justify-content: center;
  margin-block-start: var(--size-1);
}

.flash__content {
  display: flex;
  flex: 1 1 auto;
  min-inline-size: 0;
  padding-block: var(--size-1);
}

.flash__message {
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.flash__timer {
  animation: flash-timer var(--flash-duration) linear 300ms both;
  background-color: var(--flash-accent);
  block-size: 0.1875rem;
  inline-size: 100%;
  inset-block-end: 0;
  inset-inline-start: 0;
  opacity: 0.72;
  position: absolute;
  transform-origin: left center;
}

.flash--extended {
  --flash-duration: 12s;
}

@keyframes flash-enter-exit {
  0% {
    opacity: 0;
    transform: translateX(calc(100% + var(--size-4)));
  }

  8%,
  88% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(calc(100% + var(--size-4)));
  }
}

@keyframes flash-timer {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

.flash--alert {
  --flash-accent: var(--red-600);
  background-color: color-mix(in srgb, var(--color-surface) 92%, var(--red-100) 8%);
  border-color: color-mix(in srgb, var(--red-300) 48%, var(--color-border) 52%);
  color: var(--red-800);
}

.flash--notice {
  background-color: color-mix(in srgb, var(--color-surface) 92%, var(--pehuen-primary-50, var(--green-50)) 8%);
  border-color: color-mix(in srgb, var(--pehuen-primary-300, var(--green-300)) 44%, var(--color-border) 56%);
  color: var(--pehuen-primary-800, var(--green-800));
}

@media (prefers-reduced-motion: reduce) {
  .flash {
    animation-name: flash-reduced-motion;
  }
}

@keyframes flash-reduced-motion {
  0%,
  88% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
  }
}