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

$new-admonitions: (
  settings:  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",
  important: color.mix(dracula.$drac-pink, dracula.$drac-purple, $method: oklab) material_color.$clr-deep-purple-a200  "@mdi/svg/svg/comment-alert-outline.svg"
) !default;

$old-admonitions: (
  note:     dracula.$drac-blue                                                   material_color.$clr-blue-a200,
  abstract: color.mix(dracula.$drac-blue, dracula.$drac-cyan, $method: oklab)    material_color.$clr-light-blue-a400,
  info:     dracula.$drac-cyan                                                   material_color.$clr-cyan-a700,
  tip:      color.mix(dracula.$drac-cyan, dracula.$drac-green, $method: oklab)   material_color.$clr-teal-a700,
  success:  dracula.$drac-green                                                  material_color.$clr-green-a700,
  question: color.mix(dracula.$drac-green, dracula.$drac-yellow, $method: oklab) material_color.$clr-light-green-a700,
  warning:  dracula.$drac-orange                                                 material_color.$clr-orange-a400,
  failure:  color.mix(dracula.$drac-orange, dracula.$drac-red, $method: oklab)   material_color.$clr-red-a200,
  danger:   dracula.$drac-red                                                    material_color.$clr-red-a400,
  bug:      color.mix(dracula.$drac-red, dracula.$drac-pink, $method: oklab)     material_color.$clr-pink-a400,
  example:  dracula.$drac-purple                                                 material_color.$clr-deep-purple-a700,
  quote:    dracula.$drac-grey                                                   material_color.$clr-grey
) !default;

/* Style new admonitions with dark or light colors */
:root > * {
  --md-admonition-icon-color: #{dracula.$alucard-blue};
  --md-admonition-bg-color: #{color.adjust(dracula.$alucard-blue, $alpha: -0.9)};
  // --md-admonition-bg-color: #{color.mix(dracula.$alucard-blue, dracula.$alucard-bg, $weight: 12%, $method: oklab)};

  &[data-md-color-scheme="slate"] {
    --md-admonition-icon-color: #{dracula.$drac-blue};
    --md-admonition-bg-color: #{color.adjust(dracula.$drac-blue, $alpha: -0.9)};
  }

  @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};
    }

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

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

    & {
      --md-admonition-bg-color--#{$name}: #{color.adjust($tint2, $alpha: -0.9)};
      --md-admonition-icon-color--#{$name}: #{$tint2};
    }

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

/* Dark mode changes */
.md-typeset .admonition {
  font-size: inherit;
  background: var(--md-admonition-bg-color--note);
  border-width: 0;
  border-left-width: 4px;

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

/* Style existing admonitions with dark mode colors */
@each $names, $prop in $old-admonitions {

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

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

    // Define base class
    > .admonition-title {

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

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

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

    > .admonition-title {
      // 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});
      }
    }
  }
}
