// Colors
:root {
  // Inline
  --clr-code-bg: hsl(225, 31%, 18%);
  --clr-code-border: hsl(225, 30%, 31%);
  --clr-code-txt: hsl(228, 74%, 91%);
  --clr-kbd-bg: hsl(236, 17%, 18%);
  --clr-kbd-txt: hsl(240, 13%, 87%);
  --clr-kbd-border: hsl(231, 9%, 42%);

  // Block
  --clr-code-block-txt: hsl(0, 69%, 67%);
  --clr-code-selection: hsl(228, 89%, 15%);

  // Scrollbars
  --clr-code-scrollbar-bg: hsl(225, 28%, 13%);
  --clr-code-scrollbar-knob: hsl(225, 22%, 21%);
  --clr-code-scrollbar-knob-active: hsl(225, 20%, 25%);

  --clr-tkn-a: hsl(199, 17%, 57%); // Comments
  --clr-tkn-b: hsl(0, 0%, 74%); // Punctuation
  --clr-tkn-c: hsl(207, 89%, 68%); // Functions
  --clr-tkn-d: hsl(34, 100%, 50%); // Numbers
  --clr-tkn-e: hsl(88, 50%, 76%); // Strings
  --clr-tkn-f: hsl(291, 47%, 71%); // Keywords
  --clr-tkn-g: hsl(187, 71%, 50%); // Regular expressions
  --clr-tkn-h: hsl(0, 69%, 67%); // Variables
}

// Style code
code,
kbd,
pre {
  font-size: var(--font-xs);
  border-radius: var(--br-md);

  @media screen and (min-width: $layout-medium-breakpoint) {
    font-size: var(--font-sm);
  }
}
code,
kbd,
pre,
code *,
pre *,
kbd *,
code[class*='language-'],
pre[class*='language-'] {
  font-family: 'Roboto Mono', Menlo, Consolas, monospace;
}

code {
  background: var(--clr-code-bg);
  color: var(--clr-code-txt);
  padding: 0.125rem 0.375rem;
}

code[class*='language-'],
pre[class*='language-'] {
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5rem;

  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;

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

pre[class*='language-']::selection,
pre[class*='language-'] ::selection {
  background: var(--clr-code-selection);
}

:not(pre) > code[class*='language-'] {
  padding: 0.125rem 0.25rem;
  white-space: normal;
}

pre {
  position: relative;
  overflow: auto; // Responsiveness
  background: var(--clr-code-bg);
  color: var(--clr-code-block-txt);
  padding: 0.375rem;
  margin: 0.5rem 0;
  border: 0;
  white-space: pre-wrap;
  --clr-el-scrollbar-bg: var(--clr-code-scrollbar-bg);
  --clr-el-scrollbar-knob: var(--clr-code-scrollbar-knob);
  --clr-el-scrollbar-knob-active: var(--clr-code-scrollbar-knob-active);
}

pre[class*='language-'] {
  padding: 1rem 0.875rem;
}

pre.language-text {
  color: var(--clr-txt-100);
}

pre[data-code-language]:not([data-code-language='']) {
  padding-block-start: 2.625rem;

  &::before {
    font-family: 'Inter', Helvetica, sans-serif;
    font-size: inherit;
    color: var(--clr-txt-100);
    position: absolute;
    top: 0.8725rem;
    left: 0.8725rem;
    display: block;
    content: attr(data-code-language);
  }

  &:not([data-code-language='Examples']).language-shell {
    &::before {
      content: 'Shell';
    }
  }
}

.namespace {
  opacity: 0.7;
}

.token {
  &.comment,
  &.prolog,
  &.doctype,
  &.cdata {
    color: var(--clr-tkn-a);
  }
  &.punctuation {
    color: var(--clr-tkn-b);
  }
  &.property,
  &.tag,
  &.boolean,
  &.constant,
  &.symbol,
  &.deleted,
  &.function {
    color: var(--clr-tkn-c);
  }
  &.number,
  &.class-name {
    color: var(--clr-tkn-d);
  }
  &.selector,
  &.attr-name,
  &.string,
  &.char,
  &.builtin,
  &.inserted {
    color: var(--clr-tkn-e);
  }
  &.operator,
  &.entity,
  &.url,
  &.atrule,
  &.attr-value,
  &.keyword,
  &.interpolation-punctuation {
    color: var(--clr-tkn-f);
  }
  &.regex {
    color: var(--clr-tkn-g);
  }
  &.important,
  &.variable {
    color: var(--clr-tkn-h);
  }
  &.italic,
  &.comment {
    font-style: italic;
  }
  &.important,
  &.bold {
    font-weight: 500;
  }
}

.language-css .token.string,
.style .token.string {
  color: var(--clr-tkn-f);
}

p > code,
a > code {
  &,
  &[class*='language-'] {
    color: var(--clr-code-txt);
    background: var(--clr-code-bg);
  }
}

a > code {
  &,
  &[class*='language-'] {
    color: var(--clr-primary-050);
  }
}

kbd {
  background: var(--clr-kbd-bg);
  color: var(--clr-kbd-txt);
  border-radius: var(--br-md);
  padding: 0 0.375rem 0.25rem;
  border: 1px solid var(--clr-kbd-border);
  box-shadow: inset 0 -1px 0 var(--clr-kbd-border);
}
