@layer theme {
  :root {
    --syntax-comment: light-dark(#7d8b99, #999);
    --syntax-punctuation: light-dark(#5f6364, #ccc);
    --syntax-tag: light-dark(#c92c2c, #e2777a);
    --syntax-function: light-dark(#c92c2c, #6196cc);
    --syntax-number: light-dark(#c92c2c, #f08d49);
    --syntax-constant: light-dark(#c92c2c, #f8c555);
    --syntax-string: light-dark(#2f9c0a, #7ec699);
    --syntax-operator: light-dark(#a67f59, #67cdcc);
    --syntax-keyword: light-dark(#1990b8, #cc99cd);
  }
}

@layer components {
  

  code[class*="language-"],
  pre[class*="language-"] {
    white-space: pre;
    word-wrap: normal;
  }

  code[class*="language-"] ::selection,
  code[class*="language-"]::selection,
  pre[class*="language-"] ::selection,
  pre[class*="language-"]::selection {
    text-shadow: none;
  }

  @media print {
    code[class*="language-"],
    pre[class*="language-"] {
      text-shadow: none;
    }
  }

  .token.block-comment,
  .token.cdata,
  .token.comment,
  .token.doctype,
  .token.prolog {
    color: var(--syntax-comment);
  }

  .token.punctuation {
    color: var(--syntax-punctuation);
  }

  .token.attr-name,
  .token.namespace,
  .token.tag {
    color: var(--syntax-tag);
  }

  .token.function-name {
    color: var(--syntax-function);
  }

  .token.boolean,
  .token.function,
  .token.number {
    color: var(--syntax-number);
  }

  .token.class-name,
  .token.constant,
  .token.property,
  .token.symbol {
    color: var(--syntax-constant);
  }

  .token.atrule,
  .token.builtin,
  .token.important,
  .token.keyword,
  .token.selector {
    color: var(--syntax-keyword);
  }

  .token.attr-value,
  .token.char,
  .token.regex,
  .token.string,
  .token.variable {
    color: var(--syntax-string);
  }

  .token.entity,
  .token.operator,
  .token.url {
    color: var(--syntax-operator);
  }

  .token.bold,
  .token.important {
    font-weight: var(--font-weight-bold, bold);
  }

  .token.italic {
    font-style: italic;
  }

  .token.entity {
    cursor: help;
  }

  .token.inserted {
    color: var(--color-success);
  }

  .token.deleted {
    color: var(--color-danger);
  }

  div.code-toolbar {
    position: relative;
  }

  div.code-toolbar>.toolbar {
    display: flex;
    gap: var(--space-2xs);
    position: absolute;
    z-index: 10;
    top: var(--space-3xs);
    right: var(--space-2xs);
    transition: opacity .3s ease-in-out;
    opacity: 0;
  }

  div.code-toolbar:hover>.toolbar,
  div.code-toolbar:focus-within>.toolbar {
    opacity: 1;
  }

  div.code-toolbar>.toolbar>.toolbar-item {
    display: inline-block;
  }

  div.code-toolbar>.toolbar>.toolbar-item>button {
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    overflow: visible;
    padding: 0;
    user-select: none;
  }

  div.code-toolbar>.toolbar>.toolbar-item>a,
  div.code-toolbar>.toolbar>.toolbar-item>button,
  div.code-toolbar>.toolbar>.toolbar-item>span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    line-height: 1;
    font-size: max(0.75em, var(--size-tiny));
    font-weight: var(--font-weight-bold);
    background-color: var(--color-fill);
    color: var(--color-text);
    padding: var(--space-3xs) var(--space-2xs);
    border: var(--border-width) solid var(--color-border-weak);
    box-shadow: var(--shadow-small);
    border-radius: var(--border-radius-s);
  }

  div.code-toolbar>.toolbar>.toolbar-item>a,
  div.code-toolbar>.toolbar>.toolbar-item>button {
    cursor: pointer;
    text-decoration: none;

    &:is(:focus, :hover) {
      background-color: var(--color-fill-hover);
      color: var(--color-text);
    }

    &:active {
      background-color: var(--color-fill-active);
    }
  }
}