/* Reader-facing status, added by enterprise/hooks/page_status.py, and the site-wide
 * announcement bar set by extra.alpha_notice (overrides/main.html).
 *
 * Two colors, both public, both deliberately unlike the magenta `!!! todo` QA marker
 * (todo-marker.css) and the 3forge blue accent (extra.css):
 *   --page-status-dev     violet: the announcement bar and "Incomplete" notices, which say the
 *                         product is in active development. One color, so they read as one message.
 *   --page-status-issues  amber: "Known issues" notices, which are a warning. */

[data-md-color-scheme="default"] {
  --page-status-dev:         #6A4FC4;
  --page-status-dev-tint:    rgba(106, 79, 196, 0.10);
  --page-status-issues:      #f0a202;
  --page-status-issues-tint: rgba(240, 162, 2, 0.10);
}

[data-md-color-scheme="slate"] {
  --page-status-dev:         #A58CF0;
  --page-status-dev-tint:    rgba(165, 140, 240, 0.14);
  --page-status-issues:      #f0a202;
  --page-status-issues-tint: rgba(240, 162, 2, 0.12);
}

/* Notices */
.md-typeset .admonition.page-status.incomplete {
  --page-status-color: var(--page-status-dev);
  --page-status-tint: var(--page-status-dev-tint);
}

.md-typeset .admonition.page-status.known-issues {
  --page-status-color: var(--page-status-issues);
  --page-status-tint: var(--page-status-issues-tint);
}

.md-typeset .admonition.page-status {
  border-color: var(--page-status-color);
}

.md-typeset .page-status > .admonition-title {
  background-color: var(--page-status-tint);
}

.md-typeset .page-status > .admonition-title::before {
  background-color: var(--page-status-color);
  -webkit-mask-image: var(--md-admonition-icon--info);
          mask-image: var(--md-admonition-icon--info);
}

.md-typeset .page-status.known-issues > .admonition-title::before {
  -webkit-mask-image: var(--md-admonition-icon--warning);
          mask-image: var(--md-admonition-icon--warning);
}

/* Announcement bar. The theme gives the bar no class of its own, so it is selected by its
 * component. Same violet as the "Incomplete" notice. */
[data-md-component="announce"] .md-banner {
  background-color: var(--page-status-dev-tint);
  color: var(--md-default-fg-color);
  border-bottom: 1px solid var(--page-status-dev);
}

[data-md-component="announce"] .md-banner__inner {
  font-size: 0.7rem;
  text-align: center;
}