@import '_variables';

/**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */

code[class*="language-"],
pre[class*="language-"] {
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  tab-size: 4;
  hyphens: none;
  @apply font-mono text-green-900 dark:text-yellow-50 text-sm font-light text-left whitespace-pre leading-normal;
}

/* Code blocks */
pre[class*="language-"] {
  @apply relative my-2 overflow-hidden bg-reco-bg-code pt-16 pr-6 pl-16 pb-6 rounded-md border-2 border-solid border-reco-border-light;
  @apply dark:bg-reco-bg-code-dark dark:border-gray-800 dark:border-reco-border-dark;
  &::after {
    @apply absolute top-4 left-4 w-3 h-3 rounded-full;
    content: "";
    background: #f95c5b;
    box-shadow: 0 0 0 1px #da3d42, 22px 0 0 0 #fabe3b, 22px 0 0 1px #ecb03e, 44px 0 0 0 #38cd46, 44px 0 0 1px #2eae32;
  }
}

 .token.comment,
 .token.block-comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
   color: #999;
 }

 .token.punctuation {
   color: #ccc;
 }

 .token.tag,
 .token.attr-name,
 .token.namespace,
 .token.deleted {
   color: #e2777a;
 }

 .token.function-name {
   color: #6196cc;
 }

 .token.boolean,
 .token.number,
 .token.function {
   color: #f08d49;
 }

 .token.property,
 .token.class-name,
 .token.constant,
 .token.symbol {
   color: #f8c555;
 }

 .token.selector,
 .token.important,
 .token.atrule,
 .token.keyword,
 .token.builtin {
   color: #cc99cd;
 }

 .token.string,
 .token.char,
 .token.attr-value,
 .token.regex,
 .token.variable {
   color: #7ec699;
 }

 .token.operator,
 .token.entity,
 .token.url {
   color: #67cdcc;
 }

 .token.important,
 .token.bold {
   @apply font-semibold;
 }
 .token.italic {
  font-style: italic;
 }

 .token.entity {
   cursor: help;
 }

 .token.inserted {
   color: green;
 }


// code-other
div[class*='language-'] {
  @apply relative;
  &::before {
    @apply absolute z-10 top-1.5 right-3 text-gray-400 text-xs;
  }
  &:not(.line-numbers-mode) {
    .line-numbers {
      @apply hidden;
    }
  }
  &.line-numbers-mode {
    @apply relative;
    .line-numbers {
      @apply absolute bottom-0 w-16 text-center text-gray-400 pb-6 leading-normal font-mono;
      br {
        user-select: none;
      }
      .line-number {
        position: relative;
        z-index: 3;
        user-select: none;
      }
    }
  }
  pre code {
    @apply font-mono font-normal bg-transparent p-0 leading-6 #{!important};
  }
}

@each $lang in $codeLang {
  div[class*='language-'].ext-#{$lang} {
    &:before {
      content: '' + $lang;
    }
  }
}