/*
* API Symbols
*
*/


/*
* Variables
*/

$api-symbols: (
  decorator: (
    content: '@',
    background: $blue-800
  ),
  directive: (
    content: 'D',
    background: $pink-600
  ),
  pipe: (
    content: 'P',
    background: $blue-grey-600
  ),
  class: (
    content: 'C',
    background: $blue-500
  ),
  interface: (
    content: 'I',
    background: $teal-500
  ),
  function: (
    content: 'F',
    background: $green-500
  ),
  enum: (
    content: 'E',
    background: $amber-700
  ),
  var: (
    content: 'K',
    background: $purple-600
  ),
  let: (
    content: 'K',
    background: $purple-600
  ),
  const: (
    content: 'K',
    background: $purple-600
  ),
  type-alias: (
    content: 'T',
    background: $light-green-600
  )
);


/*
* Symbol Class
*/

.symbol {
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba($black, .24);
  color: $white;
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  line-height: $unit * 2;
  text-align: center;
  width: $unit * 2;

  // SYMBOL TYPES
  @each $name, $symbol in $api-symbols {
    &.#{$name} {
      background: map-get($symbol, background);

      &:before {
        content: map-get($symbol, content);
      }
    }
  }
}