// Admonitions CSS originally inspired by https://squidfunk.github.io/mkdocs-material/getting-started/

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: rgba(var(--pst-color-admonition-default), 1);
  border-radius: 0.2rem;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05), 0 0 0.0625rem rgba(0, 0, 0, 0.1);
  transition: color 250ms, background-color 250ms, border-color 250ms;

  // 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 ~ * {
    padding: 0 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 {
    position: relative;
    margin: 0 -0.6rem;
    padding: 0.4rem 0.6rem 0.4rem 2rem;
    font-weight: 700;
    background-color: rgba(var(--pst-color-admonition-default), 0.1);

    &:before {
      position: absolute;
      left: 0.6rem;
      width: 1rem;
      height: 1rem;
      color: rgba(var(--pst-color-admonition-default), 1);
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      content: var(--pst-icon-admonition-default);
    }

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

  &.attention {
    border-color: rgba(var(--pst-color-admonition-attention), 1);
    > .admonition-title {
      background-color: rgba(var(--pst-color-admonition-attention), 0.1);

      &:before {
        color: rgba(var(--pst-color-admonition-attention), 1);
        content: var(--pst-icon-admonition-attention);
      }
    }
  }

  &.caution {
    border-color: rgba(var(--pst-color-admonition-caution), 1);
    > .admonition-title {
      background-color: rgba(var(--pst-color-admonition-caution), 0.1);

      &:before {
        color: rgba(var(--pst-color-admonition-caution), 1);
        content: var(--pst-icon-admonition-caution);
      }
    }
  }

  &.warning {
    border-color: rgba(var(--pst-color-admonition-warning), 1);
    > .admonition-title {
      background-color: rgba(var(--pst-color-admonition-warning), 0.1);

      &:before {
        color: rgba(var(--pst-color-admonition-warning), 1);
        content: var(--pst-icon-admonition-warning);
      }
    }
  }

  &.danger {
    border-color: rgba(var(--pst-color-admonition-danger), 1);
    > .admonition-title {
      background-color: rgba(var(--pst-color-admonition-danger), 0.1);

      &:before {
        color: rgba(var(--pst-color-admonition-danger), 1);
        content: var(--pst-icon-admonition-danger);
      }
    }
  }

  &.error {
    border-color: rgba(var(--pst-color-admonition-error), 1);
    > .admonition-title {
      background-color: rgba(var(--pst-color-admonition-error), 0.1);

      &:before {
        color: rgba(var(--pst-color-admonition-error), 1);
        content: var(--pst-icon-admonition-error);
      }
    }
  }

  &.hint {
    border-color: rgba(var(--pst-color-admonition-hint), 1);
    > .admonition-title {
      background-color: rgba(var(--pst-color-admonition-hint), 0.1);

      &:before {
        color: rgba(var(--pst-color-admonition-hint), 1);
        content: var(--pst-icon-admonition-hint);
      }
    }
  }

  &.tip {
    border-color: rgba(var(--pst-color-admonition-tip), 1);
    > .admonition-title {
      background-color: rgba(var(--pst-color-admonition-tip), 0.1);

      &:before {
        color: rgba(var(--pst-color-admonition-tip), 1);
        content: var(--pst-icon-admonition-tip);
      }
    }
  }

  &.important {
    border-color: rgba(var(--pst-color-admonition-important), 1);
    > .admonition-title {
      background-color: rgba(var(--pst-color-admonition-important), 0.1);

      &:before {
        color: rgba(var(--pst-color-admonition-important), 1);
        content: var(--pst-icon-admonition-important);
      }
    }
  }

  &.note {
    border-color: rgba(var(--pst-color-admonition-note), 1);
    > .admonition-title {
      background-color: rgba(var(--pst-color-admonition-note), 0.1);

      &:before {
        color: rgba(var(--pst-color-admonition-note), 1);
        content: var(--pst-icon-admonition-note);
      }
    }
  }
}
