$new-admonitions: (
  settings config: $drac-pink $clr-purple-a700 "@mdi/svg/svg/cog.svg",
  new: $drac-yellow $clr-yellow-a700 "@mdi/svg/svg/alert-decagram.svg"
) !default;

  $old-admonitions: (
    note:                       $drac-dark-yellow,
    abstract summary tldr:      $drac-cyan,
    info todo:                  $drac-light-blue,
    tip hint important:         $drac-teal,
    success check done:         $drac-green,
    question help faq:          $drac-light-green,
    warning caution attention:  $drac-orange,
    failure fail missing:       $drac-dark-red,
    danger error:               $drac-red,
    bug:                        $drac-dark-pink,
    example:                    $drac-purple,
    quote cite:                 $drac-grey
  ) !default;

/* Style new admonitions with dark or light colors */
:root > * {
  --md-admonition-bg-color: transparent;

  &[data-md-color-scheme="dracula"] {
    --md-admonition-icon-color: $drac-dark-yellow;
  }

  @each $names, $prop in $new-admonitions {
    $tint: nth($prop, 1);
    $tint2: nth($prop, 2);
    $name: nth($names, 1);

    --md-admonition-icon--#{$name}: svg-load("#{nth($prop, 3)}");
    --md-admonition-bg-color--#{$name}: #{transparentize($tint2, 0.9)};
    --md-admonition-icon-color--#{$name}: #{$tint2};

    &[data-md-color-scheme="dracula"] {
      --md-admonition-bg-color--#{$name}: var(--md-default-bg-color--ultra-dark);
      --md-admonition-icon-color--#{$name}: #{$tint};
    }
  }

  @each $names, $tint in $old-admonitions {
    $name: nth($names, 1);
    --md-admonition-bg-color--#{$name}: var(--md-default-bg-color--ultra-dark);
    --md-admonition-icon-color--#{$name}: #{$tint};
  }
}

/* Dark mode changes */
[data-md-color-scheme="dracula"] .md-typeset .admonition {
  border-color: var(--md-admonition-icon-color--note);
  > .admonition-title {
    background-color: var(--md-admonition-bg-color--note);
    border-color: var(--md-admonition-icon-color--note);
    border-left: px2rem(4px) solid;
    &::before {
      background-color: var(--md-admonition-icon-color--note);
    }
  }

  box-shadow:
    0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.3),
    0 0           px2rem(1px)  hsla(0, 0%, 0%, 0.2);
}

/* Style existing admonitions with dark mode colors */
[data-md-color-scheme="dracula"] {

  @each $names, $prop in $old-admonitions {

    $name: nth($names, 1);

    // Define base class
    .md-typeset .admonition.#{$name} {
      border-color: var(--md-admonition-icon-color--#{$name});

      // Define base class
      > .admonition-title {
        background-color: var(--md-admonition-bg-color--#{$name});
        border-color: var(--md-admonition-icon-color--#{$name});

        // Icon
        &::before {
          background-color: var(--md-admonition-icon-color--#{$name});
        }
      }
    }

    // Define synonyms for base class
    @if length($names) > 1 {
      @for $n from 2 through length($names) {
        .#{nth($names, $n)} {
          @extend .#{$name};
        }
      }
    }
  }
}

@each $names, $prop in $new-admonitions {
  $name: nth($names, 1);

    // Define base class
  .md-typeset .admonition.#{$name} {
    border-color: var(--md-admonition-icon-color--#{$name});

    > .admonition-title {
      background-color: var(--md-admonition-bg-color--#{$name});
      border-color: var(--md-admonition-icon-color--#{$name});

      // Icon
      &::before {
        width: px2rem(20px);
        height: px2rem(20px);
        background-color: var(--md-admonition-icon-color--#{$name});
        background-size: px2rem(20px);
        mask-image: var(--md-admonition-icon--#{$name});
        content: "\a0";
      }
    }
  }

  // Define synonyms for base class
  @if length($names) > 1 {
    @for $n from 2 through length($names) {
      .#{nth($names, $n)} {
        @extend .#{$name};
      }
    }
  }
}
