.highlight {
  .kc { // Keyword constant
    color: var(--md-code-hl-constant-color);
  }

  .nc,  // Name, class
  .ne,  // Name, exception
  {
    color: var(--md-code-hl-class-color);
  }

  .mb {
    color: var(--md-code-hl-number-color);
  }

  .nb,  // Name, builtin
  .bp { // Name, builtin pseudo
    color: var(--md-code-hl-builtin-color);
  }

  .nn { // Name, namespace Name, namespace Name, namespace Name, namespace
    color: var(--md-code-hl-namespace-color);
  }

  .na,  // Name, attribute
  .nd,  // Name, decorator
  .ni { // Name, entity
    color: var(--md-code-hl-entity-color);
  }
  .nl,  // Name, label
  .nt { // Name, tag
    color: var(--md-code-hl-tag-color);
  }
}

.md-typeset {

  /* Allow code to look like code everywhere despite Material's current preference */
  *:not(pre) > code {
      margin: 0;
      padding: 0 px2em( 4px, 13.6px);
      color: var(--md-code-fg-color);
      background-color: var(--md-code-inline-bg-color);
      border-radius: px2rem(2px);
      box-shadow: none;
  }

  /* Code that is also a link */
  a {
    > code {
      color: inherit !important;
      background-color: var(--md-code-link-bg-color) !important;
      transition: color 125ms;
      transition: background-color 125ms;

      /* If we are linking highlighted, inline code, force it to just look like a code link */
      * {
        color: var(--md-typeset-a-color) !important;
      }

      &:hover {
        background-color: var(--md-code-link-accent-bg-color) !important;

        * {
          color: var(--md-accent-fg-color) !important;
        }
      }
    }
  }

  pre > code {
    outline: none;
  }

  /* Don't always like code breaking in table cells */
  td code {
    word-break: normal;
  }

  .highlight {

    /* Needed for tab preserving mode */
    tab-size: 8;

    /* `pymdownx-inline` mode */
    [data-linenos] {

      /* Special line mode coloring */
      &.special::before {
        background-color: var(--md-code-special-bg-color);
      }
    }
  }

    /* Special line number coloring for tables */
  .highlighttable {
    .linenodiv {
      .special {
        margin-right: px2em(-8px, 13.6px);
        margin-left: px2em(-16px, 13.6px);
        padding-right: px2em(8px, 13.6px);
        padding-left: px2em(16px, 13.6px);
        background-color: var(--md-code-special-bg-color);
      }
    }
  }

  // Filename span
  .highlight span.filename {

    // Adjust margins and and general container look of code block
    + pre {
      margin-top: 0;

      code {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }
    }

    // Style the filename banner
    position: relative;
    display: block;
    margin-top: 1em;
    padding: px2em(8px) px2em(16px, 13.6px) px2em(8px) px2em(40px, 13.6px);
    font-weight: 700;
    font-size: px2rem(13.6px);
    background-color: var(--md-default-bg-color--ultra-dark);
    border-top-left-radius: px2rem(2px);
    border-top-right-radius: px2rem(2px);

    // Add code icon
    &::before {
      position: absolute;
      left: px2em(12px, 13.6px);
      width: px2em(20px, 13.6px);
      height: px2em(20px, 13.6px);
      background-color: var(--md-default-fg-color);
      mask-image: svg-load("@mdi/svg/svg/console.svg");
      mask-repeat: no-repeat;
      mask-size: contain;
      content: "";
    }
  }
}
