/* components/alert.php. Colours come from .alert-{variant} in css/app/base.css (tint ground,
   emphasis text), shared with the alerts page scripts build. */
.uh-alert {
  gap: var(--uh-space-3) !important; /* over the gap-2 utility the component prints */
  padding: var(--uh-space-3) var(--uh-space-4);
}

.uh-alert__icon {
  flex-shrink: 0;
  font-size: 22px;
  line-height: 24px;
}

.uh-alert__content {
  flex-grow: 1;
  min-width: 0;
}

.uh-alert__title {
  margin-bottom: 2px;
  font-weight: 700;
}

.uh-alert__text {
  font-size: 14px;
  line-height: 22px;
}

.uh-alert__text > :last-child {
  margin-bottom: 0;
}

/* Bootstrap's dismissible alert reserves room for an absolutely placed close button at the
   end of the row (the left, in this RTL build); here the button sits in the flex row instead. */
.uh-alert.alert-dismissible {
  padding-inline-end: var(--uh-space-4);
}

.uh-alert.alert-dismissible .btn-close {
  position: static;
  padding: 0.25rem;
  flex-shrink: 0;
}