_admonitions.scss

/**
 * Admonitions and blocks of styled content.
 * Admonitions CSS originally inspired by https://squidfunk.github.io/mkdocs-material/getting-started/
 */
$admonition-border-radius: 0.25rem;
div.admonition,
.admonition {
  margin: 1.5625em auto;
  padding: 0 0.6rem 0.8rem 0.6rem;
  overflow: hidden;
  page-break-inside: avoid;
  border-left: 0.2rem solid;
  border-color: var(--pst-color-info);
  border-radius: $admonition-border-radius;
  background-color: var(--pst-color-on-background);
  @include box-shadow();

  // Last item should have no spacing since we'll control that w/ padding
  *:last-child {
    margin-bottom: 0;
  }

  // Items after the title should be indented
  p.admonition-title ~ * {
    margin-left: 1.4rem;
    margin-right: 1.4rem;
  }

  // Lists need to have left margin so they don't spill into it
  > ol,
  > ul {
    margin-left: 1em;
  }

  // Defaults for all admonitions
  > .admonition-title {
    margin: 0 -0.6rem;
    padding: 0.4rem 0.6rem 0.4rem 2rem;
    font-weight: var(--pst-admonition-font-weight-heading);
    position: relative;

    &:after {
      position: absolute;
      left: 0.5rem;
      width: 1rem;
      height: 1rem;
      color: var(--pst-color-info);
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      content: var(--pst-icon-admonition-default);
      opacity: 1;
    }

    @include background-from-color-variable(--pst-color-info);

    // Next element after title needs some extra upper-space
    + * {
      margin-top: 0.4em;
    }
  }

  &.attention {
    border-color: var(--pst-color-attention);
    > .admonition-title {
      &:before {
        background-color: var(--pst-color-attention);
      }

      &:after {
        color: var(--pst-color-attention);
        content: var(--pst-icon-admonition-attention);
      }
    }
  }

  &.caution {
    border-color: var(--pst-color-warning);
    > .admonition-title {
      &:before {
        background-color: var(--pst-color-warning);
      }

      &:after {
        color: var(--pst-color-warning);
        content: var(--pst-icon-admonition-caution);
      }
    }
  }

  &.warning {
    border-color: var(--pst-color-warning);
    > .admonition-title {
      &:before {
        background-color: var(--pst-color-warning);
      }

      &:after {
        color: var(--pst-color-warning);
        content: var(--pst-icon-admonition-warning);
      }
    }
  }

  &.danger {
    border-color: var(--pst-color-danger);
    > .admonition-title {
      &:before {
        background-color: var(--pst-color-danger);
      }

      &:after {
        color: var(--pst-color-danger);
        content: var(--pst-icon-admonition-danger);
      }
    }
  }

  &.error {
    border-color: var(--pst-color-danger);
    > .admonition-title {
      &:before {
        background-color: var(--pst-color-danger);
      }

      &:after {
        color: var(--pst-color-danger);
        content: var(--pst-icon-admonition-error);
      }
    }
  }

  &.hint {
    border-color: var(--pst-color-success);
    > .admonition-title {
      &:before {
        background-color: var(--pst-color-success);
      }

      &:after {
        color: var(--pst-color-success);
        content: var(--pst-icon-admonition-hint);
      }
    }
  }

  &.tip {
    border-color: var(--pst-color-success);
    > .admonition-title {
      &:before {
        background-color: var(--pst-color-success);
      }

      &:after {
        color: var(--pst-color-success);
        content: var(--pst-icon-admonition-tip);
      }
    }
  }

  &.important {
    border-color: var(--pst-color-attention);
    > .admonition-title {
      &:before {
        background-color: var(--pst-color-attention);
      }

      &:after {
        color: var(--pst-color-attention);
        content: var(--pst-icon-admonition-important);
      }
    }
  }

  &.note {
    border-color: var(--pst-color-info);
    > .admonition-title {
      &:before {
        background-color: var(--pst-color-info);
      }

      &:after {
        color: var(--pst-color-info);
        content: var(--pst-icon-admonition-note);
      }
    }
  }

  &.seealso {
    border-color: var(--pst-color-success);
    > .admonition-title {
      &:before {
        background-color: var(--pst-color-success);
      }

      &:after {
        color: var(--pst-color-success);
        content: var(--pst-icon-admonition-seealso);
      }
    }
  }

  &.admonition-todo {
    border-color: var(--pst-color-border);
    > .admonition-title {
      &:before {
        background-color: var(--pst-color-border);
      }

      &:after {
        color: var(--pst-color-border);
        content: var(--pst-icon-admonition-todo);
      }
    }
  }

  /**
   * Special-case for a `sidebar` class that makes the admonition float to
   * the right like the {sidebar} directive.
   */
  &.sidebar {
    max-width: 40%;
    float: right;
    clear: both;
    margin-left: 0.5rem;
    margin-top: 0;

    // Undo the .sidebar directive border
    border-width: 0 0 0 0.2rem;

    // TODO: these semantic-color-names border-color rules might no longer be
    //       needed when we drop support for Sphinx 4 / docutils 0.17
    &.attention,
    &.important {
      border-color: var(--pst-color-attention);
    }

    &.caution,
    &.warning {
      border-color: var(--pst-color-warning);
    }

    &.danger,
    &.error {
      border-color: var(--pst-color-danger);
    }

    &.hint,
    &.tip,
    &.seealso {
      border-color: var(--pst-color-success);
    }

    &.note,
    &.todo {
      border-color: var(--pst-color-info);
    }

    // No inner margin since we have less horizontal space w/ the sidebar
    p.admonition-title ~ * {
      margin-left: 0rem;
      margin-right: 0rem;
    }
  }
}

/**************************************************************
 * Similar content blocks that are not technically admonitions.
 */

/**
 * Topics and the {contents} directive
 */
// Docutils <= 0.17
div.topic,
div.topic.contents,
// Docutils >= 0.18
nav.contents,
aside.topic {
  display: flex;
  flex-direction: column;
  background-color: var(--pst-color-surface);
  border-color: var(--pst-color-border);
  border-radius: $admonition-border-radius;
  padding: 1rem 1.25rem;
  @include box-shadow();

  .topic-title {
    margin: 0 0 0.5rem 0;
  }

  // Over-ride large default padding
  ul.simple {
    padding-left: 1rem;

    ul {
      // So that sub-lists will have a bit less padding
      padding-left: 2em;
    }
  }
}

/**
 * Sidebar directive
 */
aside.sidebar {
  border: 1px solid var(--pst-color-border);
  background-color: var(--pst-color-surface);
  border-radius: $admonition-border-radius;
  // to match the admonition-styled sidebars:
  margin-left: 0.5rem;
  padding: 0;
  > *:last-child {
    padding-bottom: 1rem;
  }

  p.sidebar-title {
    position: relative;
    margin-bottom: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--pst-color-border);
    font-family: var(--pst-font-family-heading);
    font-weight: var(--pst-admonition-font-weight-heading);
  }

  // Add margin to the first non-`.sidebar-title` item
  > *:not(.sidebar-title):first-child,
  > p.sidebar-title + * {
    margin-top: 1rem;
  }

  > * {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/**
 * Rubrics look kind of like section headers
 */
p.rubric {
  display: flex;
  flex-direction: column;
}

/**
 * Seealso is kind of like a vertically-collapsed admonition
 */
.seealso dd {
  margin-top: 0;
  margin-bottom: 0;
}