/*
 * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-vsc-dark-plus.css
 */

@use "../../var";

#app {
  @include var.color($code-color: #d4d4d4, $code-bg-color: #1e1e1e);
}

pre[class*="language-"],
code[class*="language-"] {
  // tab size
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  @media print {
    text-shadow: none;
  }

  // Selection
  &::selection,
  ::selection {
    background: #264f78;
    text-shadow: none;
  }
}

.namespace {
  opacity: 0.7;
}

.token.doctype {
  .token.doctype-tag {
    color: #569cd6;
  }

  .token.name {
    color: #9cdcfe;
  }
}

.token.comment,
.token.prolog {
  color: #6a9955;
}

.token.punctuation {
  &,
  .language-html .language-css &,
  .language-html .language-javascript & {
    color: #d4d4d4;
  }

  &.interpolation-punctuation {
    color: #569cd6;
  }
}

.token.number,
.token.symbol,
.token.inserted,
.token.unit {
  color: #b5cea8;
}

.token.string,
.token.char,
.token.builtin,
.token.deleted {
  color: #ce9178;
}

.token.operator {
  color: #d4d4d4;

  &.arrow {
    color: #569cd6;
  }
}

.token.atrule {
  color: #ce9178;

  .token.rule {
    color: #c586c0;
  }

  .token.url {
    color: #9cdcfe;

    .token.function {
      color: #dcdcaa;
    }

    .token.punctuation {
      color: #d4d4d4;
    }
  }
}

.token.keyword {
  color: #569cd6;

  &.module,
  &.control-flow {
    color: #c586c0;
  }
}

.token.function,
.token.function .token.maybe-class-name {
  color: #dcdcaa;
}

.token.regex {
  color: #d16969;
}

.token.important {
  color: #569cd6;
}

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

.token.constant {
  color: #9cdcfe;
}

.token.class-name,
.token.maybe-class-name {
  color: #4ec9b0;
}

.token.console {
  color: #9cdcfe;
}

.token.parameter {
  color: #9cdcfe;
}

.token.interpolation {
  color: #9cdcfe;
}

.token.boolean {
  color: #569cd6;
}

.token.property,
.token.variable,
.token.imports .token.maybe-class-name,
.token.exports .token.maybe-class-name {
  color: #9cdcfe;
}

.token.selector {
  color: #d7ba7d;
}

.token.escape {
  color: #d7ba7d;
}

.token.tag {
  color: #569cd6;

  .token.punctuation {
    color: #808080;
  }
}

.token.cdata {
  color: #808080;
}

.token.attr-name {
  color: #9cdcfe;
}

.token.attr-value,
.token.attr-value .token.punctuation {
  color: #ce9178;
}

.token.attr-value .token.punctuation.attr-equals {
  color: #d4d4d4;
}

.token.entity {
  color: #569cd6;
}

.token.namespace {
  color: #4ec9b0;
}

pre[class*="language-javascript"],
code[class*="language-javascript"],
pre[class*="language-jsx"],
code[class*="language-jsx"],
pre[class*="language-typescript"],
code[class*="language-typescript"],
pre[class*="language-tsx"],
code[class*="language-tsx"] {
  color: #9cdcfe;
}

pre[class*="language-css"],
code[class*="language-css"] {
  color: #ce9178;
}

pre[class*="language-html"],
code[class*="language-html"] {
  color: #d4d4d4;
}

.language-regex .token.anchor {
  color: #dcdcaa;
}

.language-html .token.punctuation {
  color: #808080;
}

.language-css .token.string.url {
  text-decoration: underline;
}