:root {
  --alert-info-bg: rgba(56, 113, 193, 0.12);
  --alert-info-border: rgba(56, 113, 193, 0.4);
  --alert-info-color: #d0e6ff;
  --alert-success-bg: rgba(54, 179, 126, 0.12);
  --alert-success-border: rgba(54, 179, 126, 0.4);
  --alert-success-color: #d2ffe8;
  --alert-warning-bg: rgba(255, 193, 7, 0.14);
  --alert-warning-border: rgba(255, 193, 7, 0.45);
  --alert-warning-color: #fff4ce;
  --alert-danger-bg: rgba(255, 94, 94, 0.12);
  --alert-danger-border: rgba(255, 94, 94, 0.4);
  --alert-danger-color: #ffd4d4;
}

.alert {
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--roundness-2);
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--alert-info-border);
  background: var(--alert-info-bg);
  color: var(--alert-info-color);
  font-size: 0.9rem;
  line-height: 1.4;
}

.alert + .alert {
  margin-top: 0;
}

.alert--success {
  border-color: var(--alert-success-border);
  background: var(--alert-success-bg);
  color: var(--alert-success-color);
}

.alert--warning {
  border-color: var(--alert-warning-border);
  background: var(--alert-warning-bg);
  color: var(--alert-warning-color);
}

.alert--danger {
  border-color: var(--alert-danger-border);
  background: var(--alert-danger-bg);
  color: var(--alert-danger-color);
}

/*
 * Dismissable alerts.
 *
 * Mark up:
 *   <div class="alert alert--info alert--dismissible" role="alert">
 *     <span>...</span>
 *     <button type="button" class="alert__close" data-dismiss="alert"
 *             aria-label="Dismiss">&times;</button>
 *   </div>
 *
 * Wire-up: import "/js/alert.js" once — it installs a document-level
 * click delegate that dispatches a cancellable "alert:dismissed"
 * CustomEvent on the alert element and, unless prevented, sets
 * `hidden = true`. Page code can listen for the event to persist a
 * dismissal flag (e.g. localStorage) before the alert hides.
 *
 * `.alert--dismissible` adds the standard top-right absolute close
 * positioning + right-side padding. Plain `.alert__close` (no
 * `.alert--dismissible`) is fine when the consumer wants the button
 * inline in its own layout.
 */
.alert--dismissible {
  position: relative;
  padding-right: 2.5rem;
}

.alert--dismissible .alert__close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
}

.alert__close {
  padding: 0.15rem 0.45rem;
  background: transparent;
  border: 0;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
}

.alert__close:hover {
  opacity: 1;
}

.alert__close:focus-visible {
  outline: 1px solid currentColor;
  opacity: 1;
}