/* Alert boxes */
.alert {
  display: block;
  padding: 10px 14px;
  margin: 15px 0;
  border-radius: 6px;
  border: 1px solid;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
  animation: none;
}

.alert i:first-child {
  display: inline-block;
  font-size: 16px;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.alert strong {
  display: inline !important;
  font-weight: 600;
}

.alert a {
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* Links inside alerts must stand out from the alert's coloured text. The
     global `a { border-bottom: none !important }` strips the default underline,
     which left alert links blending into the surrounding text (e.g. an amber
     link inside a warning alert). A real underline + heavier weight reads as a
     link regardless of how close the link colour is to the alert text. Colour
     is left as the theme link colour set by the base `a` rule. */
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  border-bottom: none;
  transition: text-decoration-color 0.15s ease;
}

.alert a:hover {
  text-decoration-color: currentColor;
}

.alert code {
  display: inline;
  padding: 2px 5px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  font-size: 13px;
  font-family: 'Courier New', monospace;
}

/* Each variant is built from the semantic token that base_style.css already
   defines for both themes, so a project rebranding its palette rebrands its
   alerts. --info-bg / --info-text / --info-border are real tokens; the other
   three variants derive a tint and a border from their single base colour. */
.alert-info {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info-text);
}
.alert-info i:first-child {
  color: var(--info-text);
}

.alert-success {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border-color: color-mix(in srgb, var(--success) 32%, transparent);
  color: var(--success);
}
.alert-success i:first-child {
  color: var(--success);
}

.alert-warning {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border-color: color-mix(in srgb, var(--warning) 32%, transparent);
  color: var(--warning);
}
.alert-warning i:first-child {
  color: var(--warning);
}

.alert-error,
.alert-danger {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--danger) 32%, transparent);
  color: var(--danger);
}
.alert-error i:first-child,
.alert-danger i:first-child {
  color: var(--danger);
}

/* Dark theme */
body.theme-dark .alert code {
  background: rgba(255, 255, 255, 0.08);
}