/**
 * CSS Styles for code highlighting.
 * Feel free to customize token styles 
 * by copying from a prismjs compatible theme:
 * https://github.com/PrismJS/prism-themes
 */

/* Code title styles */
.remark-code-title {
  @apply mt-6 rounded-t bg-tertiary px-5 py-3 font-mono text-sm font-bold text-tertiary-foreground;
}

.remark-code-title + div > pre {
  @apply mt-0 rounded-t-none;
}

/* Code block styles */
.code-highlight {
  @apply float-left min-w-full;
}

.code-line {
  @apply -mx-4 block border-l-4 border-transparent pl-4 pr-4;
}

.code-line.inserted {
  @apply bg-green-500 bg-opacity-20;
}

.code-line.deleted {
  @apply bg-red-500 bg-opacity-20;
}

.highlight-line {
  @apply -mx-4 border-l-4 border-primary bg-primary bg-opacity-50;
}

.line-number::before {
  @apply -ml-2 mr-4 inline-block w-4 text-right text-muted-foreground;
  content: attr(line);
}


/* Token styles */
/**
 * MIT License
 * Copyright (c) 2018 Sarah Drasner
 * Sarah Drasner's[@sdras] Night Owl
 * Ported by Sara vieria [@SaraVieira]
 * Added by Souvik Mandal [@SimpleIndian]
 */
 .token.comment,
 .token.prolog,
 .token.cdata {
     color: #808080;
 }
 
 .token.class-name,
 .token.delimiter,
 .token.boolean,
 .token.keyword,
 .token.selector,
 .token.important,
 .token.atrule {
     color: #cc7832;
 }
 
 .token.operator,
 .token.punctuation,
 .token.attr-name {
     color: #a9b7c6;
 }
 
 .token.tag,
 .token.tag .punctuation,
 .token.doctype,
 .token.builtin {
     color: #e8bf6a;
 }

.namespace {
  color: rgb(178, 204, 214);
}


.token.entity,
.token.number,
.token.symbol {
    color: #6897bb;
}

.token.property,
.token.constant,
.token.variable {
    color: #9876aa;
}

.token.string,
.token.char {
    color: #6a8759;
}

.token.attr-value,
.token.attr-value .punctuation {
    color: #a5c261;
}

.token.attr-value .punctuation:first-child {
    color: #a9b7c6;
}

.token.url {
    color: #287bde;
    text-decoration: underline;
}

.token.function {
    color: #ffc66d;
}

.token.regex {
    background: #364135;
}

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

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

.token.inserted {
    background: #294436;
}

.token.deleted {
    background: #484a4a;
}

code.language-css .token.property,
code.language-css .token.property + .token.punctuation {
    color: #a9b7c6;
}

code.language-css .token.id {
    color: #ffc66d;
}

code.language-css .token.selector > .token.class,
code.language-css .token.selector > .token.attribute,
code.language-css .token.selector > .token.pseudo-class,
code.language-css .token.selector > .token.pseudo-element {
    color: #ffc66d;
}


.token.table {
  display: inline;
}
