/*
 * hljs
 */

.hljs-comment {
  color: rgba($blue, .5);
}

.hljs-keyword {
  color: darken($blue, 10%);
}

.hljs-string,
.hljs-literal,
.hljs-number {
  color: saturate($blue, 40%);
}

.hljs-placeholder {
  color: $gray;
  font-family: $serif;
  font-style: italic;
  border-radius: 10px;
  font-size: .95em;
  padding-left: .9em;
  padding-right: .9em;
  letter-spacing: 0;

  position: relative;
  top: 0;
}

.hljs-placeholder.-warning {
  padding-left: 0;
  padding-right: 0;
  color: mix($red, $gray, 50%);

  &::before {
    @include ion-icon('close-round');
    font-size: 12px;
    margin-right: .5em;
    position: relative;
    top: -1px;
    color: $red;
  }

  code {
    color: $red;
  }
}

.hljs-placeholder.-ok {
  padding-left: 0;
  padding-right: 0;
  color: $green;

  &::before {
    font-size: 12px;
    @include ion-icon('checkmark');
    margin-right: .5em;
    position: relative;
    top: -1px;
    color: $green;
  }

  code {
    color: darken($green, 15%);
  }
}

.hljs-placeholder.-info,
.hljs-placeholder.-info-left,
.hljs-placeholder.-info-right {
  padding-left: 0;
  padding-right: 0;
  color: $gray;
  opacity: .5;

  code {
    color: darken($green, 15%);
  }
}

.hljs-placeholder.-info {
  opacity: 1;
  display: block;
  margin-bottom: -1.6em;
  word-wrap: normal;
  white-space: normal;

  &::before {
    display: none;
  }
}

// Arrows
.hljs-placeholder.-info-left,
.hljs-placeholder.-info-right {
  &::before {
    font-size: 12px;
    @include ion-icon('arrow-left-c');
    margin-right: .5em;
    position: relative;
    top: -1px;
    color: $gray;
    opacity: .5;
  }
}

.hljs-placeholder.-info-right {
  &::before {
    @include ion-icon('arrow-right-c');
  }
}

.hljs-placeholder {
  code {
    font-size: 1em;
    font-family: $serif;
    font-style: italic;
    letter-spacing: 0;
  }
}

.hljs-highlight {
  background: white;
  box-shadow: 0 -2px white, 0 2px white;
  padding-left: .2em;
  padding-right: .2em;
  border-radius: 3px;
}

.hljs-line {
  display: block;
  margin-left: -8px;
  margin-right: -8px;
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: -1.6em;

  & + & {
    margin-top: 1.6em;
  }

  &.-highlight {
    background: rgba(white, .9);
  }

  &.-mute {
    &, * { color: rgba($blue, .5); }
    opacity: .5;
  }
}

.hljs-ellipsis {
  &::before {
    content: '···';
  }

  letter-spacing: .2em;
  background: rgba($blue, .1);
  color: $blue;
  font-family: $sans;
  border-radius: 2px;
  padding-left: .9em;
  padding-right: .9em;

  position: relative;
  top: 0px;
}

.hljs-hr {
  &:before {
    content: '';
    @include hr-rule;
    position: relative;
    top: .8em;
    margin-right: -16px;
  }
}

.hljs-result {
  color: rgba($blue, .5);
  font-style: italic;

  &::before {
    @include ion-icon('arrow-right-c');
    color: $green;
    margin-right: .8em;
  }
}
