/* PrismJS 1.25.0
https://prismjs.com/download.html?#themes=prism-okaidia&languages=markup+css+clike+javascript+bash+json+markdown+markup-templating+scss+twig&plugins=line-numbers+normalize-whitespace */
code[class*="language-"],
pre[class*="language-"] {
  @apply text-left whitespace-pre break-normal leading-normal;

  color: #f8f8f2;
  background: 0 0;
  word-spacing: normal;
  word-wrap: normal;
  tab-size: 4;
  hyphens: none;
}

pre[class*="language-"] {
  @apply pt-4 pb-4 lg:pb-8 pl-4 pr-4 m-0 overflow-x-auto overflow-y-hidden;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #111;
}

:not(pre) > code[class*="language-"] {
  @apply whitespace-normal;
}

.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
  color: #8292a2;
}

.token.punctuation {
  color: #f8f8f2;
}

.token.namespace {
  opacity: 0.7;
}

.token.constant,
.token.deleted,
.token.property,
.token.symbol,
.token.tag {
  color: #f92672;
}

.token.boolean,
.token.number {
  color: #ae81ff;
}

.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
  color: #a6e22e;
}

.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url,
.token.variable {
  color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.class-name,
.token.function {
  color: #e6db74;
}

.token.keyword {
  color: #66d9ef;
}

.token.important,
.token.regex {
  color: #fd971f;
}

.token.bold,
.token.important {
  @apply font-bold;
}

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

.token.entity {
  @apply cursor-help;
}

pre[class*="language-"].line-numbers {
  @apply pl-4 lg:pl-24 relative pl-24;

  counter-reset: linenumber;

  &::before {
    @apply absolute left-0 top-0 bottom-0 w-20 bg-black hidden lg:block;

    content: "";
  }
}

pre[class*="language-"].line-numbers > code {
  @apply relative;

  white-space: inherit;
  padding-top: 0.175rem;
}

.line-numbers .line-numbers-rows {
  @apply absolute pointer-events-none top-0 -left-28 w-24 select-none hidden lg:block;

  letter-spacing: -1px;
}

.line-numbers-rows > span {
  @apply block;

  counter-increment: linenumber;
}

.line-numbers-rows > span::before {
  @apply block text-right pr-5;

  content: counter(linenumber);
  color: #666;
}
