:root {
  --hightlight-blue-dark: hsl(210, 100%, 66%);
  --highlight-pink-dark: hsl(341, 90%, 67%);

  --highlight-blue: hsl(211, 100%, 42%);
  --highlight-pink: hsl(336, 65%, 45%);
}

code .line {
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  font-size: 13px;
  line-height: 20px;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  padding: 0.5px 2.5rem 0.5px 1.5rem;
}

code {
  counter-reset: line;
}

code .line::before {
  counter-increment: line;
  content: counter(line);
  width: 16px;
  font-size: 13px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: right;
  flex-shrink: 0;
  margin-right: 1.2rem;
  color: var(--gray9);
}

code .hide-line::before {
  content: "";
  width: 0px;
  display: inline-block;
  margin-right: 0.2rem;
}

code .highlight-line {
  @apply border-l-2 border-blue-9 bg-blue-4 pr-6 dark:bg-success-lighter;
}

.hljs-keyword,
.hljs-section,
.hljs-attribute,
.hljs-function,
.hljs-type,
.hljs-variable,
.hljs-attr {
  @apply text-[var(--highlight-pink)] dark:text-[var(--highlight-pink-dark)];
}

.hljs-title,
.hljs-function,
.hljs-built_in,
.hljs-name {
  @apply text-[var(--highlight-blue)] dark:text-[var(--hightlight-blue-dark)];
}

.hljs-comment {
  @apply text-gray-11;
}

.prose :where(pre):not(:where([class~="not-prose"] *)) {
  background-color: transparent;
}