/**
 * @file
 * Site messages and alerts, on every page (akp/messages).
 *
 * Nothing here positions a message: its container does, and only the host
 * (html.html.twig) floats, by Bootstrap's classes. What is left is what Bootstrap
 * has no utility for. A plain .alert is page content, in flow: its box grows with
 * its text, and long unbroken text (a path, a URL) wraps inside it.
 */
.alert {
  overflow-wrap: anywhere;
}

/* Below the sticky navbar, measured by biopama_libraries/viewport. */
.site-messages {
  top: var(--biopama-header-height, 0px);
  max-height: calc(100dvh - var(--biopama-header-height, 0px) - 1rem);
}

/* Inside fullscreen (js/messages.js) there is no header to clear. */
:fullscreen > .site-messages {
  --biopama-header-height: 0px;
}

/* The wrappers core and the template add, so all toasts are one flex stack. */
.site-messages [data-drupal-messages],
.site-messages .messages__wrapper {
  display: contents;
}

/* A dialog's form keeps its own messages, in flow (DialogEntityForm). */
[data-biopama-dialog] [data-drupal-messages] {
  display: grid;
  gap: 0.5rem;
  margin-block-end: 1rem;
}

/* Bootstrap's 350px is narrow for a warning or a list of field errors. Its own
   max-width: 100% still bounds a toast by its container. */
:root body .toast {
  --bs-toast-max-width: 36rem;
}

/* The type's colours, on the site-wide alert tokens (akp_config palette.css). */
:root body .site-message--success {
  --bs-toast-color: var(--akp-alert-success-color);
  --bs-toast-bg: var(--akp-alert-success-bg);
  --bs-toast-border-color: var(--akp-alert-success-border-color);
  --site-message-link-color: var(--akp-alert-success-link-color);
}

:root body .site-message--warning {
  --bs-toast-color: var(--akp-alert-warning-color);
  --bs-toast-bg: var(--akp-alert-warning-bg);
  --bs-toast-border-color: var(--akp-alert-warning-border-color);
  --site-message-link-color: var(--akp-alert-warning-link-color);
}

:root body .site-message--danger {
  --bs-toast-color: var(--akp-alert-danger-color);
  --bs-toast-bg: var(--akp-alert-danger-bg);
  --bs-toast-border-color: var(--akp-alert-danger-border-color);
  --site-message-link-color: var(--akp-alert-danger-link-color);
}

.site-message a {
  color: var(--site-message-link-color);
}