pre, code, kbd, var {
  font-family: Consolas, Menlo, Monaco, Lucida Console,
    Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace
}

p kbd {
  white-space: nowrap
}

code, var {
  color: #05d
}

kbd {
  background: #333;
  border-radius: 3px;
  color: white;
  font-size: smaller;
  padding: .1rem .3rem
}

samp {
  color: #282
}

figure > pre {
  background: #f2f2f2;
  margin: 1rem 0 0 0;
  padding: .5rem 1rem
}

pre {
  counter-reset: linenumber;
  /* left padding = 4.5em - code::before width  */
  margin: 0 -1rem;
  overflow: auto;       /* show all white space, even new lines on end of file */
  padding: 1rem;
  tab-size: 4;
  word-break: break-word;   /* TODO or break-all */
  white-space: pre-wrap;    /* TODO or pre-line */

  &[class]:before {
    color: #aaa;
    content: attr(class);
    float: right;
    font-weight: bold;
    margin-left: 1rem
  }
  
  > code:not(:only-child) {
    &::before {
      color: #9e9d6b;
      content: counter(linenumber) " ";
      counter-increment: linenumber;
      display: inline-block;
      text-align: right;
      width: 3.5rem   /* TODO create classes for < 10 liners, < 100 liners, < 1000 liners  width diferent gutters */
    }

	  mark {
	    background: none;
	    color: lightgray
    }

    mark::before {
      content: "^M"
    }
  }

  > samp {
    &::before {
      color: #aaa;
      content: "$ "
    }
  }

  &.hex, &.dump {
    letter-spacing: -1.5px;
    line-height: 1;
    overflow: visible
  }
}

[class$=".CSS"i] {
  tab-size: 2
}

[class$=".HTML"i] {
  tab-size: 1
}

/* highlight */

.ident, .symbol {
  
}

.keyword {
  color: $text-color;
  font-weight: bold
}

.comment {
  color: #282
}

/* literals are bad mkway :-) (C) stijn de witt */
.string, .char, .int, .float {
  color: #a00
}

pre.dark {
  background: $text-color;
  color: white;

  .ident {
    color: #08e
  }
  
  .comment {
    color: #282
  }
  
  .string, .char, .int, .float {
    color: #f88
  }
}