// Imports
@import "https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap";

// Mixins

@mixin statblock-link-styles {
  border-radius: 5px;
  color: rgb(232, 232, 232) !important;
  cursor: help;
  font-weight: 700;
  margin-bottom: 0.75rem;
  padding: 0.1rem;
  text-align: center;
  text-indent: 0;
  word-break: keep-all;
  font-style: normal;
  display: inline-block;
}

// Callout Core

body {
  .callout[data-callout="statblock-pf2e"] {
    background-color: rgb(246, 244, 242);
    border: none;

    --callout-color: var(--statblock-pf2e);

    color: rgb(0, 0, 0);
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3em;
    margin: 1rem 0;
    min-width: 50%;
    mix-blend-mode: normal;
    padding: 0 0.25em;

    // Theme Dark
    .theme-dark & {
      --statblock-pf2e: 201, 60, 60;
    }

    // Theme Light

    .theme-light & {
      --statblock-pf2e: 201, 60, 60;
    }

    // Strong + Em

    strong {
      color: rgb(0, 0, 0);
    }

    em {
      color: rgb(0, 0, 0);
    }

    strong + em {
      color: rgb(0, 0, 0);
    }

    // Callout Title Box

    & .callout-title {
      background-color: rgb(246, 244, 242);
      border: none;
      border-radius: 0;
      color: rgb(0, 0, 0);
      display: flex;
      font-family: "Oswald", sans-serif;
      font-size: inherit;
      gap: 0;
      line-height: 1.3;
      margin-bottom: 0;
      padding: 0.25em 0 0;

      & .callout-icon {
        display: none;
      }

      & .callout-title-inner {
        color: rgb(0, 0, 0);
        flex: 1;
        font-size: 1.35em;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 0;
        margin-left: 0.25em;
        padding-bottom: 0;
        position: relative;
        text-align: left;
        text-transform: uppercase;
      }
    }

    // Make Images with an Anchor of #Token Float Right

    img,
    div {
      &[src$="#token"] {
        float: right;
        margin-left: 0.3125em;
        width: 9.375em;
      }
    }

    // Main Callout Content

    & .callout-content {
      background-color: rgb(246, 244, 242);
      margin-top: 0;
      padding-left: 0.25em;
      padding-right: 0.25em;
      padding-top: 0;

      // Link Styling

      & a {
        color: rgb(51, 122, 183);
        font-weight: 700;
        text-decoration: none;
      }

      & a.external-link {
        background-image: none;
        background-size: 0;
        color: rgb(150, 122, 222);
        padding-right: 0;

        &::after {
          display: none;
        }
      }

      & .internal-link.is-unresolved::after {
        display: none;
      }

      // Fix Blockquote Looks

      & blockquote {
        background-color: rgb(246, 244, 242);
        border: none;
        color: rgb(0, 0, 0);
        margin-inline-end: 1em;
        margin-inline-start: 2em;
        padding: 0;
      }

      // Fix P Spacing

      > p {
        margin-block-start: .5em;
      }

      // Fix LI Spacing

      & li {
        line-height: 1.2em;
        margin-block-start: .5em;
      }

      // Make HR thinner and remove common Decorations

      > hr {
        border-color: rgb(0, 0, 0);
        border-top: 1px solid;
        height: 1px;
        margin: 0;
        width: 100%;

        &::before {
          display: none;
        }

        &::after {
          display: none;
        }

        &:has(.admonition):has(.is-live-preview) {
          margin-block-start: 0.5em;
        }
      }
    }
  }

  // Admonitions Only

  .admonition-statblock-pf2e-parent {
    & .admonition-content {
      > p {
        margin-block-end: 0.25em;
        margin-block-start: 0.5em;
      }
    }
  }
}

// Span Tag for Creature Float

.creature {
  float: right;
  margin-right: 0.5em;
}

// Span Tag for Sourcebook Float

.sourcebook {
  float: right;
  margin-bottom: 0.5em;
  margin-right: 0.5em;
}

// Specific Fix for Subnested callouts using ITS theme metadata

body .callout[data-callout="statblock-pf2e"] .callout[data-callout-metadata~="no-title"] > .callout-title {
  display: none;
}

// Specific Fix for Widths

body .markdown-reading-view .callout[data-callout="statblock-pf2e"] {
  width: 70%;
}

body .markdown-reading-view .callout[data-callout="statblock-pf2e"]:has(.creature-statblock-container) {
  width: 100%;
}


body .is-live-preview .callout[data-callout="statblock-pf2e"] {
  width: 70%;
}

body .is-live-preview .callout[data-callout="statblock-pf2e"]:has(.creature-statblock-container) {
  width: 100%;
}

.published-container .callout[data-callout="statblock-pf2e"] {
  max-width: 70%;
  min-width: 40%;
}
