// Style based on Furo https://github.com/pradyunsg/furo
.admonition{
  margin: 1rem auto;
  padding: 0 0.5rem 0.5rem 0.5rem;

  background: $color-admonition-background;

  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);

  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;
    padding-left: .5rem;
  }
}
.admonition-title{
  position: relative;
  margin: 0 -0.5rem 0.5rem;
  padding-left: 1rem;
  padding-right: .5rem;
  padding-top: .4rem;
  padding-bottom: .4rem;

  font-weight: 500;
  line-height: 1.3;

    // Our fancy icon
  &::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    width: 1rem;
    height: 1rem;
  }

}

// Default styles
.admonition-title {
  background-color: var(--color-admonition-title-background);
  &::before {
    background-color: var(--color-admonition-title);
    mask-image: var(--icon-admonition-default);
    mask-repeat: no-repeat;
  }
}

//
// Variants
//

.admonition {
    border-left: .3rem solid;

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

        > .admonition-title {
            background-color: var(--hint-warning-background);
        }
    }

    &.tip {
        border-left-color: var(--hint-tip);

        > .admonition-title {
            background-color: var(--hint-tip-background);
        }
    }

    &.note {
        border-left-color: var(--hint-note);

        > .admonition-title {
            background-color: var(--hint-note-background);
        }
    }

    &.important {
        border-left-color: var(--hint-important);

        > .admonition-title {
            background-color: var(--hint-important-background);
        }
    }


}
        //   &::before {
    //     background-color: var(--color-admonition-title-warning);
    //     mask-image: var(--icon-#{nth($type, 2)});
    //   }
//   }
//   @each $type 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($type, 2)});
//         }
//       }
//     }
//   }