@layer components {
  .highlighted-code {
    .token.keyword,
    .token.class-name,
    .token.url,
    .token.tag {
      @apply text-code-blue-1;
    }

    .token.console,
    .token.class-name.namespace,
    .token.tag.attr-name {
      @apply text-black;
    }

    .token.builtin,
    .token.function,
    .token.string,
    .token.char,
    .token.selector,
    .token.tag.attr-value,
    .token.atrule,
    .token.inserted {
      @apply text-code-green-1;
    }

    .token.boolean,
    .token.number,
    .token.symbol,
    .token.variable,
    .token.constant,
    .token.property,
    .token.property-access,
    .token.deleted {
      @apply text-code-red-1;
    }

    .token.regex,
    .token.important {
      @apply text-code-orange-1;
    }

    .token.operator,
    .token.entity {
      @apply text-code-brown-1;
    }

    .token.punctuation {
      @apply text-code-gray-2;
    }

    .token.comment,
    .token.prolog,
    .token.doctype,
    .token.cdata {
      @apply text-code-gray-1;
    }

    .react-syntax-highlighter-line-number.linenumber {
      @apply !min-w-[2.25em] text-gray-70;
    }
  }
}
