/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* M3 snackbar: bottom-centre, inverse surface, body-medium, extra-small
   corners, elevation 3. Enters with emphasized-decelerate, leaves with
   emphasized-accelerate. */
.flash {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0.875rem 1rem;
  border-radius: var(--md-sys-shape-corner-extra-small);
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  box-shadow: var(--md-sys-elevation-level3);
  /* width, not shrink-to-fit: left:50% would otherwise cap the box at 50vw. */
  width: max-content;
  min-width: min(21.5rem, calc(100vw - 2rem));
  max-width: min(42rem, calc(100vw - 2rem));
  text-align: left;
  animation:
    flash-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate),
    flash-out var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) 4s forwards;
}

/* No flash-out; leaves room for the close button. */
.flash-sticky {
  gap: 0.75rem;
  padding-right: 0.5rem;
  animation: flash-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
}

.flash-message { flex: 1; }

/* The snackbar's close affordance: a 40px icon button. */
.flash-close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: inherit;
  cursor: pointer;
}
.flash-close .icon { width: 20px; height: 20px; vertical-align: 0; }

.flash-close:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

/* Errors keep the snackbar shape but take the error-container colours so
   they're unmistakable. */
.flash-alert {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

@keyframes flash-in {
  from { opacity: 0; transform: translateX(-50%) translateY(1rem); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes flash-out {
  from { opacity: 1; }
  to   { opacity: 0; pointer-events: none; }
}