[data-markdown] {
  .markdown-code-block {
    position: relative;
    padding: 16px 18px;
    margin: 16px 0;
    overflow-x: auto;
    color: #e8e3d8;
    background: #13151a;
    border: 0.5px solid #2d3340;
    border-radius: 7px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);

    &[data-lang]::before {
      position: sticky;
      left: 100%;
      display: block;
      width: max-content;
      margin: -4px 0 8px auto;
      color: #8f9aad;
      content: attr(data-lang);
      font-family: var(--font-mono);
      font-size: 13px;
      line-height: 1;
    }
  }

  .markdown-code {
    display: block;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre;
  }

  .hl-keyword { color: #ff8f9b; }
  .hl-operator { color: #b9c4d8; }
  .hl-type { color: #f4c06a; }
  .hl-value { color: #9ed67f; }
  .hl-variable { color: #a9d8ff; }
  .hl-property { color: #78dcca; }
  .hl-attribute { color: #d8b4fe; font-style: italic; }
  .hl-generic { color: #e8e3d8; }
  .hl-number { color: #f2b36d; }
  .hl-literal { color: #86d3ff; }
  .hl-comment { color: #8290a5; font-style: italic; }
  .hl-injection { color: #f0d98c; }
  .hl-em { font-style: italic; }
  .hl-strong { font-weight: 700; }
  .hl-blur { color: #6e7888; }
  .hl-addition { background: rgba(71, 167, 106, 0.22); }
  .hl-deletion { background: rgba(222, 92, 92, 0.22); }

  @media (prefers-color-scheme: dark) {
    .markdown-code-block {
      background: #0d1015;
    }
  }
}