/* =============================================================================
   A4 - alert, ported from HealthExpress by build/kit/port-css.py.

   Structure unchanged. Applied: 6 colour literal(s) -> on-accent, 6 rgb-channel
   tint(s) -> colour-mix, 0 hand-authored dark override(s) removed, 0 silent
   literal fallback(s) dropped, 0 black shadow(s) re-based on --ink,
   0 decorative glow(s) removed from bordered controls.

   No Bootstrap: these rules were already token-driven. Only the markup was ever
   coupled to it.
   ========================================================================== */

/* ============================================================================
   HealthExpress Theme - Alert Component
   Color variants, dismissible, with icons
   ============================================================================ */

.s-alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s-gap-3);
  padding-block: 0.875rem;
  padding-inline: 1rem;
  border: var(--s-border-width) solid transparent;
  border-radius: var(--s-border-radius);
  font-size: var(--s-font-size-sm);
  margin-block-end: 1rem;
}

/* Alert Icon */
.s-alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  margin-block-start: 0.0625rem;
}

/* Alert Content */
.s-alert-content {
  flex: 1;
  min-inline-size: 0;
}

.s-alert-title {
  font-weight: var(--s-font-weight-semibold);
  margin-block-end: 0.25rem;
}

.s-alert-content p:last-child {
  margin-block-end: 0;
}

/* Close button */
.s-alert-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  border-radius: var(--s-border-radius-sm);
  font-size: 1rem;
  line-height: 1;
  transition: var(--s-transition-opacity);
  margin-inline-start: auto;
}

.s-alert-close:hover {
  opacity: 1;
}

.s-alert-close:focus-visible {
  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Solid / Filled Variants
   --------------------------------------------------------------------------- */

.s-alert-primary {
  background-color: var(--s-primary-light);
  border-color: var(--s-primary-tint);
  color: var(--s-primary);
}

.s-alert-secondary {
  background-color: var(--s-secondary-light);
  border-color: var(--s-secondary-tint);
  color: var(--s-secondary);
}

.s-alert-success {
  background-color: var(--s-success-light);
  border-color: var(--s-success-tint);
  color: var(--s-success);
}

.s-alert-danger {
  background-color: var(--s-danger-light);
  border-color: var(--s-danger-tint);
  color: var(--s-danger);
}

.s-alert-warning {
  background-color: var(--s-warning-light);
  border-color: var(--s-warning-tint);
  color: var(--s-warning);
}

.s-alert-info {
  background-color: var(--s-info-light);
  border-color: var(--s-info-tint);
  color: var(--s-info);
}

/* ---------------------------------------------------------------------------
   Filled Variants (full-color background)
   --------------------------------------------------------------------------- */

.s-alert-filled-primary   { background-color: var(--s-primary);   color: var(--on-accent); border-color: var(--s-primary); }
.s-alert-filled-secondary { background-color: var(--s-secondary); color: var(--on-accent); border-color: var(--s-secondary); }
.s-alert-filled-success   { background-color: var(--s-success);   color: var(--on-accent); border-color: var(--s-success); }
.s-alert-filled-danger    { background-color: var(--s-danger);    color: var(--on-accent); border-color: var(--s-danger); }
.s-alert-filled-warning   { background-color: var(--s-warning);   color: var(--on-accent); border-color: var(--s-warning); }
.s-alert-filled-info      { background-color: var(--s-info);      color: var(--on-accent); border-color: var(--s-info); }

/* ---------------------------------------------------------------------------
   Outline Variants
   --------------------------------------------------------------------------- */

.s-alert-outline-primary   { background-color: transparent; border-color: var(--s-primary);   color: var(--s-primary); }
.s-alert-outline-secondary { background-color: transparent; border-color: var(--s-secondary); color: var(--s-secondary); }
.s-alert-outline-success   { background-color: transparent; border-color: var(--s-success);   color: var(--s-success); }
.s-alert-outline-danger    { background-color: transparent; border-color: var(--s-danger);    color: var(--s-danger); }
.s-alert-outline-warning   { background-color: transparent; border-color: var(--s-warning);   color: var(--s-warning); }
.s-alert-outline-info      { background-color: transparent; border-color: var(--s-info);      color: var(--s-info); }

/* ---------------------------------------------------------------------------
   Alert Link
   --------------------------------------------------------------------------- */

.s-alert a,
.s-alert-link {
  font-weight: var(--s-font-weight-semibold);
  color: inherit;
  text-decoration: underline;
}

.s-alert a:hover,
.s-alert-link:hover {
  opacity: 0.8;
}

/* ---------------------------------------------------------------------------
   Dismissible animation
   --------------------------------------------------------------------------- */

.s-alert-dismissing {
  animation: s-alert-dismiss 0.2s ease-in forwards;
}

@keyframes s-alert-dismiss {
  to {
    opacity: 0;
    transform: translateY(-0.5rem);
    margin-block-end: 0;
    padding-block: 0;
    block-size: 0;
    overflow: hidden;
  }
}