// Definitely inspired by mkdocs-material.
.admonition
  margin: 1rem auto
  padding: 0 0.5rem 0.5rem 0.5rem

  background: var(--color-admonition-background)

  border-radius: 0.2rem
  border-left: 0.2rem solid var(--color-admonition-title)
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05), 0 0 0.0625rem rgba(0, 0, 0, 0.1)

  font-size: var(--admonition-font-size)

  overflow: hidden
  page-break-inside: avoid

  // First element should have no margin, since the title has it.
  > :nth-child(2)
    margin-top: 0

  // Last item should have no margin, since we'll control that w/ padding
  > :last-child
    margin-bottom: 0


  // Defaults for all admonitions
  p.admonition-title
    position: relative
    margin: 0 -0.5rem 0.5rem
    padding: 0.5rem 0.5rem 0.5rem 2rem

    font-weight: 500
    font-size: var(--admonition-title-font-size)
    background-color: var(--color-admonition-title-background)

    line-height: 1.3

    // Our fancy icon
    &::before
      content: ""
      position: absolute
      left: 0.5rem
      width: 1rem
      height: 1rem
      // color: var(--color-admonition-title)
      background-color: var(--color-admonition-title)

      mask-image: var(--icon-admonition-default)
      mask-repeat: no-repeat

  //
  // Variants
  //
  @each $type, $value in $admonitions
    &.#{$type}
      border-left-color: var(--color-admonition-title--#{$type})
      .admonition-title
        background-color: var(--color-admonition-title-background--#{$type})
        &::before
          background-color: var(--color-admonition-title--#{$type})
          mask-image: var(--icon-#{nth($value, 2)})

.admonition-todo .admonition-title
  text-transform: uppercase
