/* Clean code highlighting for Hexo highlight.js output. */
:root {
  --code-bg: rgba(17, 24, 39, 0.46);
  --code-border: rgba(226, 232, 240, 0.16);
  --code-text: #d7dee8;
  --code-muted: #738195;
  --code-keyword: #ff8a8a;
  --code-string: #9adbc7;
  --code-number: #8fc7ff;
  --code-title: #c7a7ff;
  --code-attr: #ffd17a;
  --code-symbol: #f3a66f;
  --code-tag: #7bc7ff;
  --code-comment: #7e8da1;
}

figure.highlight {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 1.6rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--code-border);
  border-radius: 8px;
  background: var(--code-bg);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.1);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  scrollbar-width: thin;
}

figure.highlight::before {
  display: none;
}

figure.highlight table {
  display: block;
  width: max-content;
  min-width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: transparent;
}

figure.highlight tbody,
figure.highlight tr {
  display: block;
  width: 100%;
  background: transparent;
}

figure.highlight td.gutter {
  display: none;
}

figure.highlight td.code {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 1.15rem 1.25rem;
  background: transparent;
}

figure.highlight pre,
figure.highlight code {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  background: transparent !important;
  color: var(--code-text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9rem;
  line-height: 1.75;
  tab-size: 2;
}

figure.highlight .line {
  min-height: 1.75em;
}

figure.highlight .comment,
figure.highlight .quote,
figure.highlight .hljs-comment,
figure.highlight .hljs-quote {
  color: var(--code-comment);
  font-style: italic;
}

figure.highlight .keyword,
figure.highlight .selector-tag,
figure.highlight .meta .keyword,
figure.highlight .doctag,
figure.highlight .hljs-keyword,
figure.highlight .hljs-selector-tag,
figure.highlight .hljs-doctag {
  color: var(--code-keyword);
}

figure.highlight .string,
figure.highlight .regexp,
figure.highlight .subst,
figure.highlight .hljs-string,
figure.highlight .hljs-regexp,
figure.highlight .hljs-subst {
  color: var(--code-string);
}

figure.highlight .number,
figure.highlight .literal,
figure.highlight .variable,
figure.highlight .template-variable,
figure.highlight .hljs-number,
figure.highlight .hljs-literal,
figure.highlight .hljs-variable,
figure.highlight .hljs-template-variable {
  color: var(--code-number);
}

figure.highlight .title,
figure.highlight .section,
figure.highlight .title.function_,
figure.highlight .function_,
figure.highlight .function .title,
figure.highlight .hljs-title,
figure.highlight .hljs-section,
figure.highlight .hljs-title.function_ {
  color: var(--code-title);
}

figure.highlight .attr,
figure.highlight .attribute,
figure.highlight .property,
figure.highlight .params,
figure.highlight .hljs-attr,
figure.highlight .hljs-attribute,
figure.highlight .hljs-property,
figure.highlight .hljs-params {
  color: var(--code-attr);
}

figure.highlight .name,
figure.highlight .tag,
figure.highlight .selector-id,
figure.highlight .selector-class,
figure.highlight .selector-attr,
figure.highlight .selector-pseudo,
figure.highlight .hljs-name,
figure.highlight .hljs-tag,
figure.highlight .hljs-selector-id,
figure.highlight .hljs-selector-class,
figure.highlight .hljs-selector-attr,
figure.highlight .hljs-selector-pseudo {
  color: var(--code-tag);
}

figure.highlight .symbol,
figure.highlight .bullet,
figure.highlight .built_in,
figure.highlight .type,
figure.highlight .title.class_,
figure.highlight .class_,
figure.highlight .class .title,
figure.highlight .hljs-symbol,
figure.highlight .hljs-bullet,
figure.highlight .hljs-built_in,
figure.highlight .hljs-type,
figure.highlight .hljs-title.class_ {
  color: var(--code-symbol);
}

figure.highlight .deletion,
figure.highlight .hljs-deletion {
  color: #ffc2bd;
  background: rgba(248, 81, 73, 0.14);
}

figure.highlight .addition,
figure.highlight .hljs-addition {
  color: #b7f7c6;
  background: rgba(46, 160, 67, 0.14);
}

figure.highlight .emphasis,
figure.highlight .hljs-emphasis {
  font-style: italic;
}

figure.highlight .strong,
figure.highlight .hljs-strong {
  font-weight: 700;
}

.article-content :not(pre) > code,
article :not(pre) > code {
  padding: 0.14rem 0.34rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 5px;
  color: #d14d72;
  background: rgba(209, 77, 114, 0.08);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
}

@media (max-width: 768px) {
  figure.highlight {
    margin-right: -0.25rem;
    margin-left: -0.25rem;
  }

  figure.highlight td.code {
    padding: 1rem 0.95rem 1.1rem;
  }

  figure.highlight pre,
  figure.highlight code {
    font-size: 0.84rem;
  }
}