html {
  & code,
  & pre[class*="language-"] {
    color: var(--dark);
    font-family: 'source-code-pro', monospace;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    font-size: 0.9rem;
    line-height: 1.2rem;

    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
  }

  /* Code blocks */
  & pre[class*="language-"] {
    background-color: var(--mist);
    font-size: 0.9rem;
    margin: 1rem 0;
    padding: 2rem;
    text-wrap: wrap;
    word-break: break-all;
  }

  /* Inline code */
  & :not(pre) > code {
    background-color: var(--mist);
    box-decoration-break: clone;
    margin: 0;
    padding: 0.2rem 0.4rem;
    -webkit-box-decoration-break: clone;
  }

  & .token.comment,
  & .token.prolog,
  & .token.doctype,
  & .token.cdata {
    color: var(--gloom);
    font-style: italic;
  }

  & .token.namespace {
    opacity: 0.8;
  }

  & .token.string,
  & .token.attr-value {
    color: var(--gloom);
  }

  & .token.punctuation,
  & .token.operator {
    color: var(--dark);
  }

  & .token.entity,
  & .token.url,
  & .token.symbol,
  & .token.number,
  & .token.boolean,
  & .token.variable,
  & .token.constant,
  & .token.property,
  & .token.regex,
  & .token.inserted {
    color: var(--gloom);
  }

  & .token.atrule,
  & .token.keyword,
  & .token.attr-name,
  & .language-autohotkey .token.selector {
    color: var(--gloom);
    font-weight: 600;
  }

  & .token.function,
  & .token.deleted,
  & .language-autohotkey .token.tag {
    color: var(--gloom);
  }

  & .token.tag,
  & .token.selector,
  & .language-autohotkey .token.keyword {
    color: var(--dark);
  }

  & .token.important,
  & .token.function,
  & .token.bold {
    font-weight: 600;
  }

  & .token.italic {
    font-style: italic;
  }

  &.dark {
    & code,
    & pre[class*="language-"] {
      color: var(--haze);
    }

    /* Code blocks */
    & pre[class*="language-"] {
      background-color: var(--gloom);
    }

    /* Inline code */
    & :not(pre) > code {
      background-color: var(--gloom);
    }

    & .token.comment,
    & .token.prolog,
    & .token.doctype,
    & .token.cdata {
      color: var(--mist);
    }

    & .token.string,
    & .token.attr-value {
      color: var(--mist);
    }

    & .token.punctuation,
    & .token.operator {
      color: var(--haze);
    }

    & .token.entity,
    & .token.url,
    & .token.symbol,
    & .token.number,
    & .token.boolean,
    & .token.variable,
    & .token.constant,
    & .token.property,
    & .token.regex,
    & .token.inserted {
      color: var(--mist);
    }

    & .token.atrule,
    & .token.keyword,
    & .token.attr-name,
    & .language-autohotkey .token.selector {
      color: var(--mist);
    }

    & .token.function,
    & .token.deleted,
    & .language-autohotkey .token.tag {
      color: var(--mist);
    }

    & .token.tag,
    & .token.selector,
    & .language-autohotkey .token.keyword {
      color: var(--haze);
    }
  }
}