/*
 * FB-02 Inline alert / banner — app/components/ui/alert_component.rb
 *
 * --radius-md, subtle family fill, ink text, 20px leading icon. Sizes
 * (page/card/field) only change padding and title size — the treatment is
 * otherwise identical. Dismiss reuses toast_controller.js's dismiss()
 * action (see the component doc comment); the exit animation is the same
 * `is-leaving` class toast.css defines.
 */

:root {
  /* Width the message column has to keep before the trailing action is allowed
     to wrap under it. Chosen so that on the narrowest surface the app ships
     (the 375px referrer shell) the icon, the message and the dismiss button
     still share one line, while an action button does not. */
  --alert-body-basis: 192px;
}

.ui-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
  border-radius: var(--radius-md);
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.ui-alert.is-leaving {
  opacity: 0;
  transform: translateY(-4px);
}

.ui-alert--page {
  padding: var(--space-4) var(--space-6);
}

.ui-alert--card {
  padding: var(--space-4);
}

.ui-alert--field {
  padding: var(--space-3);
  gap: var(--space-2);
}

.ui-alert--accent {
  background: var(--color-accent-100);
  color: var(--color-accent-pressed);
}

.ui-alert--success {
  background: var(--color-success-subtle);
  color: var(--color-success-ink);
}

.ui-alert--warning {
  background: var(--color-warning-subtle);
  color: var(--color-warning-ink);
}

.ui-alert--danger {
  background: var(--color-danger-subtle);
  color: var(--color-danger-ink);
}

.ui-alert__icon {
  flex-shrink: 0;
  display: inline-flex;
  width: var(--icon-md);
  height: var(--icon-md);
  color: inherit;
}

.ui-alert__icon svg {
  display: block;
}

/*
 * The trailing action never shrank, so on a narrow surface it took its width
 * out of the message and left it reading one word a line — the wrapping seen
 * on the business account screen in the 20 Aug review screenshots. The basis
 * makes the row wrap the action down instead of squeezing the copy.
 */
.ui-alert__body {
  flex: 1 1 var(--alert-body-basis);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-sans);
  color: var(--color-ink);
}

.ui-alert__title {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: 500;
}

.ui-alert__content {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.ui-alert--field .ui-alert__content {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

.ui-alert__action {
  flex-shrink: 0;
}

/* Keeps the dismiss button at the far end of whichever line it lands on. */
.ui-alert__close {
  flex-shrink: 0;
  margin-inline-start: auto;
}