/* Global flash notice/alert banner (app/views/layouts/application.html.erb). */

.flash {
  position: fixed;
  top: 1rem;
  left: 50%;
  z-index: 1000;
  width: min(38rem, calc(100vw - 2rem));
  padding: 0;
  transform: translateX(-50%);
}

.flash__notice,
.flash__alert {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3.75rem;
  border-radius: 0.9rem;
  padding: 0.9rem 1.15rem;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 0.75rem;
  box-shadow: 0 1rem 2.5rem rgb(var(--rgb-shadow) / 0.16), 0 0.25rem 0.75rem rgb(var(--rgb-shadow) / 0.08);
  backdrop-filter: blur(16px);
}

.flash__notice {
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, var(--color-surface), var(--color-surface-secondary)) padding-box,
    linear-gradient(115deg, var(--color-primary), var(--color-accent)) border-box;
  color: var(--color-text);
}

.flash__alert {
  border: 1px solid rgb(var(--rgb-danger) / 0.2);
  background: linear-gradient(135deg, var(--color-surface), rgb(var(--rgb-danger) / 0.04));
  color: var(--color-danger-dark);
}

.flash__icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.7rem;
  color: var(--color-on-primary);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1;
}

.flash__icon--notice {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  box-shadow: 0 0.3rem 0.75rem rgb(var(--rgb-primary) / 0.2);
}

.flash__icon--alert {
  background: var(--gradient-danger);
  box-shadow: 0 0.3rem 0.75rem rgb(var(--rgb-danger) / 0.18);
}

.flash__progress {
  position: absolute;
  inset: auto 0 0;
  height: 0.2rem;
  overflow: hidden;
  background: rgb(var(--rgb-primary) / 0.08);
}

.flash__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(1);
  transform-origin: left;
}

.flash__notice .flash__progress-fill {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.flash__alert .flash__progress-fill {
  background: linear-gradient(90deg, var(--color-danger), var(--color-danger-dark));
}

.flash--auto-dismiss .flash__progress-fill {
  animation: flash-progress var(--flash-dismiss-duration) linear forwards;
}

@keyframes flash-progress {
  to {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .flash__notice,
  .flash__alert {
    animation: flash-enter 0.2s ease-out both;
  }

  @keyframes flash-enter {
    from {
      opacity: 0;
      transform: translateY(-0.4rem) scale(0.98);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}