/* ============================================================================
   ADMONITION COMPONENT

   Five designs, each with a light and dark treatment built from the existing
   --color-* / --cf-* tokens:

     success  tip
     neutral  note, seealso, generic `.. admonition::`, attention, hint
     info     important, confluenttip
     warning  warning, caution
     danger   danger, error

   To customize, edit the per-design rules below. To map another directive to
   a design, add its selector to that design's rules.

   Markup comes from _ext/admonition_html.py:

     <div class="admonition tip">          flex row
       <span class="admonition-icon">      icon box
       <div class="admonition-content">    flex column
         <p class="admonition-title">
         ...body...

   Loaded after confluent.css (see _templates/layout-head.html).
   ============================================================================ */

/* ---- Structure ---------------------------------------------------------- */

.rst-content .admonition {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--cf-space-08) !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-radius: var(--cf-radius-md) !important;
  padding: 14px 16px !important;
  margin: var(--cf-space-24) 0 !important;
}

/* Icon box: as tall as the title line so the icon centers on it */
.rst-content .admonition > .admonition-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 24px;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: center;
}

.rst-content .admonition > .admonition-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.rst-content .admonition > .admonition-content > .admonition-title {
  background: none !important;
  padding: 0 !important;
  margin: 0 0 var(--cf-space-04) !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  line-height: 24px !important;
}

/* Flex children don't collapse margins: use bottom margins only, none on the last child */
.rst-content .admonition > .admonition-content > * {
  margin-top: 0 !important;
}

.rst-content .admonition > .admonition-content > :last-child {
  margin-bottom: 0 !important;
}

/* Drop the legacy theme font icon in the title */
.rst-content .admonition > .admonition-content > .admonition-title::before {
  content: none !important;
  display: none !important;
}

.rst-content .admonition.admonition-no-content > .admonition-content > .admonition-title {
  margin-bottom: 0 !important;
}

.rst-content .admonition p:last-child {
  margin-bottom: 0 !important;
}

/* ---- neutral: note, seealso, generic admonition ------------------------- */
/* Tokens flip with the theme, so no dark override is needed. */

.rst-content .admonition {
  background-color: var(--cf-surface-01) !important;
  border-color: var(--cf-border-subtle) !important;
}

.rst-content .admonition > .admonition-content > .admonition-title {
  color: var(--cf-text-primary) !important;
}

.rst-content .admonition > .admonition-icon {
  background-image: url('../images/grey_status_icon.svg');
}

/* ---- success: tip ------------------------------------------------------- */

.rst-content .admonition.tip {
  background-color: var(--color-green-10) !important;
  border-color: var(--color-green-20) !important;
}

.rst-content .admonition.tip > .admonition-content > .admonition-title {
  color: var(--color-green-80) !important;
}

.rst-content .admonition.tip > .admonition-icon {
  background-image: url('../images/green_status_icon.svg');
}

[data-theme='dark'] .rst-content .admonition.tip {
  background-color: var(--color-green-100) !important;
  border-color: var(--color-green-90) !important;
}

[data-theme='dark'] .rst-content .admonition.tip > .admonition-content > .admonition-title {
  color: var(--color-green-30) !important;
}

/* ---- info: important, confluenttip -------------------------------------- */

.rst-content .admonition.important,
.rst-content .admonition.confluenttip {
  background-color: var(--color-blue-10) !important;
  border-color: var(--color-blue-20) !important;
}

.rst-content .admonition.important > .admonition-content > .admonition-title,
.rst-content .admonition.confluenttip > .admonition-content > .admonition-title {
  color: var(--color-blue-80) !important;
}

.rst-content .admonition.important > .admonition-icon,
.rst-content .admonition.confluenttip > .admonition-icon {
  background-image: url('../images/blue_status_icon.svg');
}

[data-theme='dark'] .rst-content .admonition.important,
[data-theme='dark'] .rst-content .admonition.confluenttip {
  background-color: var(--color-blue-100) !important;
  border-color: var(--color-blue-90) !important;
}

[data-theme='dark'] .rst-content .admonition.important > .admonition-content > .admonition-title,
[data-theme='dark'] .rst-content .admonition.confluenttip > .admonition-content > .admonition-title {
  color: var(--color-blue-30) !important;
}

/* ---- warning: warning, caution ------------------------------------------ */

.rst-content .admonition.warning,
.rst-content .admonition.caution {
  background-color: var(--color-yellow-10) !important;
  border-color: var(--color-yellow-20) !important;
}

.rst-content .admonition.warning > .admonition-content > .admonition-title,
.rst-content .admonition.caution > .admonition-content > .admonition-title {
  color: var(--color-yellow-80) !important;
}

.rst-content .admonition.warning > .admonition-icon,
.rst-content .admonition.caution > .admonition-icon {
  background-image: url('../images/yellow_status_icon.svg');
}

[data-theme='dark'] .rst-content .admonition.warning,
[data-theme='dark'] .rst-content .admonition.caution {
  background-color: var(--color-yellow-100) !important;
  border-color: var(--color-yellow-90) !important;
}

[data-theme='dark'] .rst-content .admonition.warning > .admonition-content > .admonition-title,
[data-theme='dark'] .rst-content .admonition.caution > .admonition-content > .admonition-title {
  color: var(--color-yellow-30) !important;
}

/* ---- danger: danger, error ---------------------------------------------- */

.rst-content .admonition.danger,
.rst-content .admonition.error {
  background-color: var(--color-red-10) !important;
  border-color: var(--color-red-20) !important;
}

.rst-content .admonition.danger > .admonition-content > .admonition-title,
.rst-content .admonition.error > .admonition-content > .admonition-title {
  color: var(--color-red-80) !important;
}

.rst-content .admonition.danger > .admonition-icon,
.rst-content .admonition.error > .admonition-icon {
  background-image: url('../images/red_status_icon.svg');
}

[data-theme='dark'] .rst-content .admonition.danger,
[data-theme='dark'] .rst-content .admonition.error {
  background-color: var(--color-red-100) !important;
  border-color: var(--color-red-90) !important;
}

[data-theme='dark'] .rst-content .admonition.danger > .admonition-content > .admonition-title,
[data-theme='dark'] .rst-content .admonition.error > .admonition-content > .admonition-title {
  color: var(--color-red-30) !important;
}

/* ---- Dark mode body text ------------------------------------------------ */

[data-theme='dark'] .rst-content .admonition p,
[data-theme='dark'] .rst-content .admonition li {
  color: var(--cf-text-primary) !important;
}