@import "colors.less";

pre {
  background: @darker-grey;
  color: @off-white;
  line-height: 24px;

  &[data-line] {
    position: relative;
  }
}

.token {
  &.comment,
  &.block-comment,
  &.prolog,
  &.doctype,
  &.cdata {
    color: @grey-secondary;
  }

  &.punctuation,
  &.anchor {
    color: @grey-primary;
  }

  &.tag,
  &.attr-name,
  &.namespace,
  &.deleted {
    color: @red-primary;
  }

  &.function-name {
    color: @blue-primary;
  }

  &.boolean,
  &.number,
  &.function {
    color: @amber-primary;
  }

  &.property,
  &.class-name,
  &.constant,
  &.symbol {
    color: @amber-primary;
  }

  &.selector,
  &.important,
  &.atrule,
  &.keyword,
  &.builtin {
    color: @blue-primary;
  }

  &.string,
  &.char,
  &.attr-value,
  &.regex,
  &.variable {
    color: @green-primary;
  }

  &.operator,
  &.entity,
  &.url {
    color: @blue-secondary;
  }

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

  &.italic {
    font-style: italic;
  }

  &.entity {
    cursor: help;
  }

  &.inserted {
    color: @green-primary;
  }
}

.line-highlight {
  background: rgba(255, 255, 255, 0.1);

  position: absolute;
  left: 0;
  right: 0;
  margin-top: 0.5rem; /* same as pre padding */

  pointer-events: none;
  line-height: inherit;
  white-space: pre;

  &:before,
  &[data-end]:after {
    content: attr(data-start);
    position: absolute;
    top: 0;
    right: 0;
    background-color: @darkest-grey;
    color: @offer-white;
    text-align: center;
    width: 2em;
  }

  &[data-end]:after {
    content: attr(data-end);
    top: auto;
    bottom: 0;
  }
}

.line-numbers .line-highlight:before,
.line-numbers .line-highlight:after {
  content: none;
}
