:root {
  --md-default-fg-color: inherit;
  --md-primary-fg-color: inherit;
  --md-default-fg-color--lightest: inherit;
  --md-tooltip-host-y: inherit;
  --md-admonition-icon--variable: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.41 3c1.39 2.71 1.94 5.84 1.59 9-.2 3.16-1.3 6.29-3.17 9l-1.53-1c1.61-2.43 2.55-5.2 2.7-8 .34-2.8-.11-5.57-1.3-8zM5.17 3 6.7 4C5.09 6.43 4.15 9.2 4 12c-.34 2.8.12 5.57 1.3 8l-1.69 1c-1.4-2.71-1.96-5.83-1.61-9 .2-3.16 1.3-6.29 3.17-9m6.91 7.68 2.32-3.23h2.53l-3.78 5 2.2 4.92h-2.26L11.71 14l-2.43 3.33H6.76l3.9-5.12-2.13-4.76h2.27z"/></svg>');
  --md-admonition-icon--string: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="2,5 5.5,5 4.7,12 2.8,12"/><polygon points="7,5 10.5,5 9.7,12 7.8,12"/><polygon points="13.5,5 17,5 16.2,12 14.3,12"/><polygon points="18.5,5 22,5 21.2,12 19.3,12"/></svg>');
  --md-admonition-icon--int: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.003 7.754a.75.75 0 0 1 .75-.75h5.232a.75.75 0 0 1 .53 1.28l-2.776 2.777c.55.097 1.057.253 1.492.483.905.477 1.504 1.284 1.504 2.418 0 .966-.471 1.75-1.172 2.27-.687.511-1.587.77-2.521.77-1.367 0-2.274-.528-2.667-.756a.75.75 0 0 1 .755-1.297c.331.193.953.553 1.912.553.673 0 1.243-.188 1.627-.473.37-.275.566-.635.566-1.067 0-.5-.219-.836-.703-1.091-.538-.284-1.375-.443-2.471-.443a.75.75 0 0 1-.53-1.28l2.643-2.644h-3.421a.75.75 0 0 1-.75-.75M7.88 15.215a1.4 1.4 0 0 0-1.446.83.75.75 0 0 1-1.37-.61 2.9 2.9 0 0 1 2.986-1.71c.589.06 1.139.323 1.557.743.434.446.685 1.058.685 1.778 0 1.641-1.254 2.437-2.12 2.986-.538.341-1.18.694-1.495 1.273H9.75a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1-.75-.75c0-1.799 1.337-2.63 2.243-3.21 1.032-.659 1.55-1.031 1.55-1.8 0-.355-.116-.584-.26-.732a1.07 1.07 0 0 0-.652-.298Zm.234-13.121a.75.75 0 0 1 .386.656V9h1.252a.75.75 0 0 1 0 1.5H5.75a.75.75 0 0 1 0-1.5H7V4.103l-.853.533a.749.749 0 1 1-.795-1.272l2-1.25a.75.75 0 0 1 .762-.02"/></svg>');
  --md-admonition-icon--bool: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6m0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4M7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"/></svg>');
  --md-admonition-icon--list: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 4v2h3v12h-3v2h5V4M4 4v16h5v-2H6V6h3V4z"/></svg>');
  --md-admonition-icon--dict: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 3a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2H3v2h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h2v-2H8v-5a2 2 0 0 0-2-2 2 2 0 0 0 2-2V5h2V3m6 0a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1v2h-1a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2v-2h2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5h-2V3z"/></svg>');
  --md-status--draft: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 17h2v-2h-2zm0-10v6h2V7M6 16h5v2H6m0-6h8v2H6M4 2c-1.11 0-2 .89-2 2v16c0 1.11.89 2 2 2h12c1.11 0 2-.89 2-2V8l-6-6M4 4h7v5h5v11H4Z"/></svg>');
  --md-status--outdated: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 7v6l5.2 3.1.8-1.2-4.5-2.7V7zm9 5v6h2v-6zm0 8v2h2v-2zm-2 0c-1.7 1.3-3.7 2-6 2-5.5 0-10-4.5-10-10S6.5 2 12 2c4.8 0 8.9 3.4 9.8 8h-2.1c-.9-3.4-4-6-7.7-6-4.4 0-8 3.6-8 8s3.6 8 8 8c2.4 0 4.5-1.1 6-2.7z"/></svg>');
  --md-instances-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.7 2.2h1.5c1.1 0 2 .9 2 2v6.4zm5.4 1.6 1.3.6c1 .4 1.5 1.6 1.1 2.6l-2.4 5.9zM18 15.5l-5-12c-.3-.8-1-1.2-1.8-1.2-.3 0-.5.1-.8.2L3 5.5C2 5.9 1.5 7 2 8l5 12c.3.8 1 1.2 1.8 1.2.3 0 .5 0 .8-.2l7.4-3c.8-.3 1.2-1 1.2-1.8-.1-.2-.1-.5-.2-.7m-6.6-.5-3.2-2.4.4-4 3.2 2.4z"/></svg>');
  --md-instance-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 2H7c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-5 15-3-5 3-5 3 5z"/></svg>');
  --md-question-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H4c-.53 0-1.04.21-1.41.59C2.21 2.96 2 3.47 2 4v12c0 .53.21 1.04.59 1.41.37.38.88.59 1.41.59h4l4 4 4-4h4c.53 0 1.04-.21 1.41-.59S22 16.53 22 16V4c0-.53-.21-1.04-.59-1.41C21.04 2.21 20.53 2 20 2m-9.95 4.04c.54-.36 1.25-.54 2.14-.54.94 0 1.69.21 2.23.62q.81.63.81 1.68c0 .44-.15.83-.44 1.2-.29.36-.67.64-1.13.85-.26.15-.43.3-.52.47-.09.18-.14.4-.14.68h-2c0-.5.1-.84.29-1.08.21-.24.55-.52 1.07-.84.26-.14.47-.32.64-.54.14-.21.22-.46.22-.74 0-.3-.09-.52-.27-.69-.18-.18-.45-.26-.76-.26-.27 0-.49.07-.69.21-.16.14-.26.35-.26.63H9.27c-.05-.69.23-1.29.78-1.65M11 14v-2h2v2Z"/></svg>');
}

.md-status--outdated::after {
  mask-image: var(--md-status--outdated);
  -webkit-mask-image: var(--md-status--outdated);
}

.md-status--draft::after {
  mask-image: var(--md-status--draft);
  -webkit-mask-image: var(--md-status--draft);
}

.md-typeset__table {
  min-width: 100%;
}

@media only screen and (min-width: 76.25em) {
  .md-main__inner {
    max-width: 80%;
  }

  .md-sidebar--primary {
    margin-left: 0;
    left: 0;
  }

  .md-sidebar--secondary {
    right: 0;
    margin-left: 0;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes heart {
  0%, 40%, 80%, 100% {
    transform: scale(1);
  }
  20%, 60% {
    transform: scale(1.15);
  }
}

.heart {
  animation: heart 1000ms infinite;
}

label.sb-toggle--override-scope {
  aspect-ratio: 1 / 1;

  &::after {
    mask-image: var(--md-instances-icon);
    -webkit-mask-image: var(--md-instances-icon);
    top: 0;
  }

  &:has(input:checked)::after {
    mask-image: var(--md-instance-icon);
    -webkit-mask-image: var(--md-instance-icon);
  }
}

/* Placeholders auto input table overrides */
.auto-input-table {
  margin-left: auto;
  margin-top: -1.6rem;
  margin-bottom: -.2rem;
  border: 1px solid color-mix(in srgb, var(--md-default-fg-color), transparent 90%) !important;

  .auto-table-title {
    color: inherit !important;
    background-color: color-mix(in srgb, var(--md-default-fg-color), transparent 90%) !important;
    font-size-adjust: ex-height .5;
    padding-inline: .3rem;
  }

  .settings_contents {
    border-bottom: 3px solid color-mix(in srgb, var(--md-default-fg-color), transparent 90%) !important;

    button {
      background-color: color-mix(in srgb, var(--md-default-fg-color), transparent 90%) !important;
    }
  }
}

/* Placeholders styling */
.inline-editor-custom {
  .placeholder-value-any {
    box-shadow: inset 0 0 .5em .01em rgba(0, 0, 0, .2);
    border: 1px solid color-mix(in srgb, var(--md-default-fg-color), transparent 90%);
    padding-inline: .15em;
    border-radius: .1rem;

    &:hover {
      border: 1px solid var(--md-default-fg-color);
    }

    &:hover, &:focus {
      .inline-editor-icon-span {
        display: inline-block;
        margin: 0 3px;
        fill: var(--md-primary-fg-color);

        svg {
          padding-top: 2px;
          vertical-align: text-top;
        }
      }
    }
  }
}

.md-typeset {
  table:not([class]) {
    display: table;
  }

  .md-button--stretch {
    width: 100%;
  }

  .md-icon--sm {
    --md-icon-size: .75em;
    margin: .07em;
  }

  /*
    Overrides for button grids
    Usage: wrap a 4 button block in a div with this class
  */

  .grid--buttons {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));

    .md-button {
      text-align: center;
      white-space: nowrap;
      overflow: clip;
      text-overflow: ellipsis;
    }
  }

  /* Dodge inline admonition scrollbars */

  .inline-fit-content {
    width: fit-content;
  }

  /*
    Custom admonitions for variables.

    Usage:
      !!! variable "`var_name`"
          Content for a generic variable.

    For specific types, add the type name after "variable":
      !!! variable string "`string_var_name`"
          Content for a string variable.

      !!! variable int "`int_var_name`"
          Content for an integer variable.

      !!! variable bool "`bool_var_name`"
          Content for a boolean variable.

      !!! variable list "`list_var_name`"
          Content for a list variable.

      !!! variable dict "`dict_var_name`"
          Content for a dictionary variable.
  */

  .admonition.variable,
  details.variable {
    border-color: rgb(84, 109, 120);
  }

  .variable > .admonition-title,
  .variable > summary {
    background-color: rgba(84, 109, 120, 0.1);

    code {
      background: none;
      box-shadow: none;
    }
  }

  .variable > .admonition-title::before,
  .variable > summary::before {
    background-color: rgb(84, 109, 120);
    -webkit-mask-image: var(--md-admonition-icon--variable);
    mask-image: var(--md-admonition-icon--variable);
  }

  .variable.string > .admonition-title::before,
  .variable.string > summary::before {
    -webkit-mask-image: var(--md-admonition-icon--string);
    mask-image: var(--md-admonition-icon--string);
  }

  .variable.int > .admonition-title::before,
  .variable.int > summary::before {
    -webkit-mask-image: var(--md-admonition-icon--int);
    mask-image: var(--md-admonition-icon--int);
  }

  .variable.bool > .admonition-title::before,
  .variable.bool > summary::before {
    -webkit-mask-image: var(--md-admonition-icon--bool);
    mask-image: var(--md-admonition-icon--bool);
  }

  .variable.list > .admonition-title::before,
  .variable.list > summary::before {
    -webkit-mask-image: var(--md-admonition-icon--list);
    mask-image: var(--md-admonition-icon--list);
  }

  .variable.dict > .admonition-title::before,
  .variable.dict > summary::before {
    -webkit-mask-image: var(--md-admonition-icon--dict);
    mask-image: var(--md-admonition-icon--dict);
  }

  /* Traffic direction signs with buttons */

  .admonition.cta > div {
    display: flex;
    gap: 1em;
    flex-direction: column;
    margin-top: .6rem;
  }

  .admonition.cta > div > div,
  .sb-cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;

    & > * {
      display: flex;
      flex-wrap: wrap;
      gap: .6rem;
      margin-block: 0;
      justify-content: end;

      > p {
        margin-block: 0;

        .md-button {
          position: relative;
          padding: .3em 2em .3em 2em;
          width: 18em;
          text-align: center;
          white-space: nowrap;
          overflow: clip;
          text-overflow: ellipsis;
        }
      }
    }

    & > *:last-child {
      margin-left: auto;
    }
  }

  /*
    Button side icons
    Requires **bold** link text and an :icon: on one side or both
    Ex: [**Go Home**:material-home:](index.md){ .md-button }
  */

  .md-button:has(> strong) {
    position: relative;

    > .twemoji:first-child {
      position: absolute;
      top: 49%;
      left: calc(0.5em + 3%);
      transform: translateY(-50%);
    }

    > .twemoji:not(:first-child) {
      position: absolute;
      top: 49%;
      right: calc(0.5em + 3%);
      transform: translateY(-50%);
    }
  }

  .md-button[href=""] {
    pointer-events: none;
    color: color-mix(in srgb, currentColor, transparent 50%);
    border-color: color-mix(in srgb, currentColor, transparent 50%);
    background-color: transparent;
  }

}

/* Rounded code blocks */
.md-typeset .highlight > pre,
.md-typeset .highlight > pre > code,
.md-typeset pre > code {
  border-radius: 0.5rem;
}

/* Code blocks with filename - round top of filename, bottom of code */
.md-typeset .highlight > .filename {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.md-typeset .highlight > .filename + pre,
.md-typeset .highlight > .filename + pre > code {
  border-radius: 0 0 0.5rem 0.5rem;
}

/* Rounded search bar */
.md-search__form {
  border-radius: 0.5rem;
}

/* Search bar when active - round top, square bottom for results dropdown */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-radius: 0.5rem 0.5rem 0 0;
}

/* Round bottom of search results */
.md-search__output {
  border-end-start-radius: 0.5rem;
  border-end-end-radius: 0.5rem;
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__output {
  box-shadow: none;
}

.md-search__scrollwrap {
  border-end-start-radius: 0.5rem;
  border-end-end-radius: 0.5rem;
}

/* Rounded images - opt-out via .no-rounded class */
.md-typeset img {
  border-radius: 0.5rem;
}

.md-typeset img.no-rounded {
  border-radius: 0;
}

/* Rounded buttons */
.md-typeset .md-button {
  border-radius: 0.5rem;
}

/* Rounded annotation tooltips */
/* .md-annotation .md-tooltip__inner {
  border-radius: 0.5rem;
} */

/* Content tabs - custom background colors */
.md-typeset {
  .tabbed-labels {
    background: linear-gradient(to right, color-mix(in srgb, var(--md-primary-fg-color), transparent 90%) 0%, transparent 100%);
    border-radius: .25rem .25rem 0 0;

    > label {
      border-radius: inherit;

      &:hover {
        background-color: color-mix(in srgb, var(--md-primary-fg-color), transparent 84%);
      }
    }
  }
}

/* Hide hover tooltip when annotation popup is open */
body:has(.md-tooltip.md-tooltip--active) .md-tooltip2.md-tooltip2--active {
  display: none;
}

.md-tooltip2 {
  top: calc(var(--md-tooltip-host-y) - 2rem);
}


.sb-annotated {
  .md-annotation__index::after {
    mask-image: var(--md-question-icon);
    -webkit-mask-image: var(--md-question-icon);
    top: .1ch;
  }
}