/**
 * Admonitions and blocks of styled content.
 * Admonitions CSS originally inspired by https://squidfunk.github.io/mkdocs-material/getting-started/
 */
$admonition-border-radius: 0.25rem;
$admonition-left-border-width: 0.2rem;

div.admonition,
.admonition {
  margin: 1.5625em auto;
  padding: 0 0.6rem 0.8rem;
  overflow: hidden;

  /* break-inside has replaced page-break-inside and is widely usable since 2019 */
  break-inside: avoid;
  border-left: $admonition-left-border-width 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 {
    $padding-top: 0.4rem;
    $icon-width: 1rem;
    $icon-margin-x: 0.5rem;

    margin: 0 -0.6rem;
    padding: 0.4rem 0.6rem $padding-top calc($icon-width + 2 * $icon-margin-x);
    font-weight: var(--pst-admonition-font-weight-heading);
    position: relative;

    @include legacy-backdrop-placeholder;

    background-color: var(--pst-color-info-bg);

    // now that we use solid colors we want the title on top
    z-index: 1;

    &::after {
      position: absolute;
      top: $padding-top; // align icon with title text
      left: 0;
      margin: 0 $icon-margin-x;
      width: $icon-width;
      height: 1rem;
      color: var(--pst-color-info);
      font: var(--fa-font-solid);
      line-height: inherit;
      content: var(--pst-icon-admonition-default);
      opacity: 1;
    }

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

  &.attention {
    border-color: var(--pst-color-attention);

    > .admonition-title {
      background-color: var(--pst-color-attention-bg);

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

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

    > .admonition-title {
      background-color: var(--pst-color-warning-bg);

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

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

    > .admonition-title {
      background-color: var(--pst-color-warning-bg);

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

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

    > .admonition-title {
      background-color: var(--pst-color-danger-bg);

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

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

    > .admonition-title {
      background-color: var(--pst-color-danger-bg);

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

  &.hint {
    border-color: var(--pst-color-success);

    > .admonition-title {
      background-color: var(--pst-color-success-bg);

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

  &.tip {
    border-color: var(--pst-color-success);

    > .admonition-title {
      background-color: var(--pst-color-success-bg);

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

  &.important {
    border-color: var(--pst-color-attention);

    > .admonition-title {
      background-color: var(--pst-color-attention-bg);

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

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

    > .admonition-title {
      background-color: var(--pst-color-info-bg);

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

  &.seealso {
    border-color: var(--pst-color-success);

    > .admonition-title {
      background-color: var(--pst-color-success-bg);

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

  &.admonition-todo {
    border-color: var(--pst-color-secondary);

    > .admonition-title {
      background-color: var(--pst-color-secondary-bg);

      &::after {
        color: var(--pst-color-secondary);
        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 $admonition-left-border-width;

    // 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: 0;
      margin-right: 0;
    }
  }
}

/**************************************************************
 * 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;
  }

  // Over-ride text color to ensure enough contrast
  p {
    color: var(--pst-color-on-surface) !important;
  }

  a {
    color: var(--pst-color-link-higher-contrast);
  }

  // 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;
}
