@import "utils";

// colors:
$background: #181818;
$foreground: white;

$red:     #E26F90;
$magenta: #D17BCA;
$green:   #89B366;
$brown:   #99764b;
$violet:  #BD9CE0;
$blue:    #336CAD;
$orange:  #FF9700;
$yellow:  #F4BD8C;

$alt-red:     #F5A2B7;
$alt-magenta: #E0A7DC;
$alt-green:   #b7e388;
$alt-brown:   #ad916f;
$alt-violet:  #AD83E2;
$alt-blue:    #6691C2;
$alt-orange:  #c17200;
$alt-yellow:  #ffdebb;

.#{$kl-class} {
  background: $background;
  padding:    15px;

  #{token('language', 'expression')} { color: $foreground; }

  #{token('keyword')}    { color: $orange; }
  #{token('operator')}   { color: $alt-orange; }
  #{token('delimiter')}  { color: $alt-orange; }
  #{token('string')}     { color: $alt-green; }
  #{token('comment')}    { color: #555 }
  #{token('number')}     { color: $red }
  #{token('constant')}   { color: $alt-red }
  #{token('call')}       { color: $yellow }

  #{token('call.preprocessor')} { color: $brown }
  #{token('preprocessor')}      { color: $alt-brown }

  #{token('symbol')}     { color: $alt-yellow; }
  #{token('variable')}   { color: $alt-violet;  }
  #{token('annotation')} { color: $orange; }
  #{token('parameter')}  { color: $alt-blue; }

  #{token('annotation.arguments')} { color: $foreground; }
  #{token('variable.splat')}       { color: $violet;  }
  #{token('variable.property')}    { color: $violet; }
  #{token('symbol.dotnet')}        { color: $alt-yellow; }

  #{token('comment.docblock')} { color: #666 }

  #{token('tag')} { color: $alt-orange; }
  #{token('symbol.tag')} { font-weight: bold }
  #{token('attribute')}  { color: $yellow; }

  #{token('format.bold')}      { font-weight: bold }
  #{token('format.italics')}   { font-style: italic }
  #{token('format.strike')}    { text-decoration: line-through }
  #{token('format.underline')} { text-decoration: underline }

  #{token('format.monospace', 'format.block.code')} { color: #666 }

  #{token('format.header')} { color: $alt-blue }
  #{token('symbol.type')}   { color: $alt-red }

  #{token('tag.namespace')} { color: $orange; font-weight: normal }
  #{token('attribute.namespace')} { color: $alt-yellow; }
}
