@use "sass:color";
@use "sass:list";
@use "../utilities/convert";
@use "../palette/material_color";
@use "../palette/dracula";

.md-typeset .admonition {
  border-width: 0;
  border-left-width: 4px;
}

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

  $old-admonitions: (
    note:                       dracula.$drac-dark-yellow,
    abstract:                   dracula.$drac-cyan,
    info:                       dracula.$drac-light-blue,
    tip:                        dracula.$drac-teal,
    success:                    dracula.$drac-green,
    question:                   dracula.$drac-light-green,
    warning:                    dracula.$drac-orange,
    failure:                    dracula.$drac-dark-red,
    danger:                     dracula.$drac-red,
    bug:                        dracula.$drac-dark-pink,
    example:                    dracula.$drac-purple,
    quote:                      dracula.$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: dracula.$drac-dark-yellow;
  }

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

    & {
      --md-admonition-icon--#{$name}: svg-load("#{list.nth($prop, 3)}");
      --md-admonition-bg-color--#{$name}: #{color.adjust($tint2, $alpha: -0.9)};
      --md-admonition-icon-color--#{$name}: #{$tint2};
      --md-admonition-shadow-color--#{$name}: #{color.adjust($tint2, $alpha: -0.9)};
    }

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

    @each $names, $tint in $old-admonitions {
      $name: list.nth($names, 1);

      & {
        --md-admonition-bg-color--#{$name}: var(--md-default-bg-color--ultra-dark);
        --md-admonition-icon-color--#{$name}: #{$tint};
        --md-admonition-shadow-color--#{$name}: #{color.adjust($tint, $alpha: 0.9)};
      }
    }
  }
}

/* Dark mode changes */
[data-md-color-scheme="dracula"] .md-typeset .admonition {
  border-color: var(--md-admonition-icon-color--note);
  box-shadow: var(--md-shadow-z2);

  &:focus-within {
    box-shadow: 0 0 0 convert.px2rem(4px) var(--md-admonition-shadow-color--note);
  }

  > .admonition-title {
    background-color: var(--md-admonition-bg-color--note);
    &::before {
      background-color: var(--md-admonition-icon-color--note);
    }
    &::after {
      color: var(--md-admonition-icon-color--note);
    }
  }
}

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

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

    $name: list.nth($names, 1);

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

      &:focus-within {
        box-shadow: 0 0 0 convert.px2rem(4px) var(--md-admonition-shadow-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});
        }
        &::after {
          color: var(--md-admonition-icon-color--#{$name});
        }
      }
    }

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

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

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

    &:focus-within {
      box-shadow: 0 0 0 convert.px2rem(4px) var(--md-admonition-shadow-color--#{$name});
    }

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

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

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