// Variables
@use '../pf2e-variables' as var;

//Maps
@use '00-pf2e-maps' as callout-map;
@use '00-pf2e-maps' as admonition-map;

// Mixins Next
@use 'shake-ins/ca-root' as root;
@use 'shake-ins/ca-title' as title;
@use 'shake-ins/ca-content' as body;
@use 'shake-ins/ca-misc' as extras;


// Specifics...
// Local Variables
$call-box-shadow: rgba(26, 34, 77, 0.9);
$svg-size-content: 1rem;
$svg-size: 1.125rem;

// Callout Mass Production
@each $key, $value in callout-map.$pf2e-callouts {
  .callout[data-callout='#{$key}'] {
    --callout-border-opacity: 0.3;
    --callout-color: #{$value};
    // Mixins Here
    @include root.common-root;
    @include root.callout-drop;

    // General Styling Here
    background-color: #{$value};
    color: var.$almost-black;
    border-color: var(--pf2e-light-brown-headers);
    border-style: solid;
    border-width: 0.05rem;
    margin: 0.1875rem 0.125rem 0.125rem;
    padding: 0.125rem;

    & .callout-title {

      // Mixins Here
      @include title.title;

      // General Styling Here

      & .callout-icon .svg-icon {
        display: none;
      }

      & .callout-title-inner {

        // Mixins Here
        @include title.inner-top;

        // General Styling Here
        font-weight: 700;
        margin-left: 1rem;
        padding-bottom: 0.125rem;
      }
    }


    & .callout-content {
      background-color: #{$value};
      padding: 1rem;

      // Mixins Here
      @include body.content-headings(1);
      @include body.content-headings(2);
      @include body.content-headings(3);
      @include body.content-code;
      @include body.content-links;
      @include body.content-strong;

      & blockquote {
        @include body.content-blockquotes;
      }

      @include extras.callout-extras-p-bottom;


      // General Styling Here

    }
  }
}

//Time to color this Seed
@each $key, $value in admonition-map.$pf2e-admonitions {
  .admonition[data-callout='#{$key}'] {
    --callout-border-opacity: 0.3;
    --callout-color: #{$value};
    --callout-content-background: #{$value};
    // Mixins Here
    @include root.common-root;

    // General Styling Here
    box-shadow: 0 0 5px 0 $call-box-shadow;
    border-color: var(--pf2e-light-brown-headers);
    border-style: solid;
    border-width: 0.05rem;
    color: var.$almost-black;
    margin: 3px 0.125rem 0.125rem;
    padding: 0.125rem;

    & .admonition-title {
      background-color: #{$value};
      // Mixins Here
      @include title.title;

      // General Styling Here

      & .admonition-title-icon .svg-icon {

        // General Styling Here
        display: block;
        height: 1.5rem;
        left: 0.5rem;
        margin-left: 0.5rem;
        position: absolute;
        top: 0.5rem;
        width: 1.5rem;

        &:has(.content) {
          height: $svg-size-content;
          width: $svg-size-content;
        }
      }

      & .admonition-title-inner {
        // Mixins Here
        @include title.inner-top;

        // General Styling Here
        font-weight: 700;
        padding-bottom: 0.125rem;
        margin-right: 0.125rem;
      }
    }


    & .admonition-content {
      background-color: #{$value};
      padding: 1rem;
      // Mixins Here
      @include body.content-headings(1);
      @include body.content-headings(2);
      @include body.content-headings(3);
      @include body.content-code;
      @include body.content-links;
      @include body.content-strong;

      & blockquote {
        @include body.content-blockquotes;
      }

      //General Styling Here
      @include extras.callout-extras-p-bottom;
      @include body.admonition-callout-kids;
    }

    @include body.admonition-copy;
  }
}
