.hljs-comment,
.hljs-quote {
  color: var(--hljs-comment);
}

/* Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
  color: var(--hljs-variable);
}

/* Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
  color: var(--hljs-number);
}

/* Yellow */
.hljs-attribute {
  color: var(--hljs-attribute);
}

/* Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
  color: var(--hljs-string);
}

/* Blue */
.hljs-title,
.hljs-section {
  color: var(--hljs-title);
}

/* Purple */
.hljs-keyword,
.hljs-selector-tag {
  color: var(--hljs-keyword);
}

.hljs {
  overflow: auto;
  display: block;
  font-size: 14px;
  border-bottom-left-radius: 0.4rem;
  border-bottom-right-radius: 0.4rem;
  color: #f8f8f2;
}

pre {
  background: hsla(var(--app-code-block));
  overflow: auto;

  border-radius: 0.4rem;
}
pre > code {
  white-space: pre;
  font-size: 14px;
  overflow: auto;
  color: #f8f8f2;
  display: block;
  padding: 16px;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

.code-block {
  pre {
    padding: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

@media screen and (-ms-high-contrast: active) {
  .hljs-addition,
  .hljs-attribute,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-bullet,
  .hljs-comment,
  .hljs-link,
  .hljs-literal,
  .hljs-meta,
  .hljs-number,
  .hljs-params,
  .hljs-string,
  .hljs-symbol,
  .hljs-type,
  .hljs-quote {
    color: highlight;
  }

  .hljs-keyword,
  .hljs-selector-tag {
    font-weight: bold;
  }
}

.code-block-wrapper {
  white-space: nowrap;
}

.code-line {
  // padding-left: 12px;
  padding-right: 12px;
  margin-left: -12px;
  margin-right: -12px;
  border-left: 4px solid transparent;
}

div.code-line:empty {
  height: 21.5938px;
}

span.code-line {
  // min-width: 100%;
  white-space: pre;
  display: inline-block;
  max-width: 10vw;
}

.code-line.inserted {
  background-color: var(--color-inserted-line);
}

.code-line.deleted {
  background-color: var(--color-deleted-line);
}

.highlighted-code-line {
  background-color: var(--color-highlighted-line);
  border-left: 4px solid var(--color-highlighted-line-indicator);
}

.numbered-code-line::before {
  content: attr(data-line-number);
  margin-left: -4px;
  margin-right: 16px;
  width: 1.2rem;
  font-size: 12px;
  color: rgba($color: #fff, $alpha: 0.4);
  text-align: right;
  display: inline-block;
}

.code-header {
  &--border {
    border-bottom: 1px solid rgba($color: #fff, $alpha: 0.1);
  }
}