@import 'theme-light';
@import 'theme-dark';
@import '../../blueprint/colors.scss';

$line-number-char-width: 10px;
$line-padding-left: 10px;

@keyframes set-color {
  0% {
    color: inherit;
  }
}


.CodeEditor,
.CodeViewer {
  @include lightCodeTheme;

  font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
  background: var(--code-bg);
  color: var(--code-fg);
  counter-reset: line;
  line-height: 1.5;
  hyphens: none;
  direction: ltr;

  .#{$ns}-dark &,
  [data-theme="dark"] & {
    @include darkCodeTheme;
  }

  &::selection,
  ::selection {
    background: var(--code-selection-bg);
  }

  &--inline {
    margin: 0 2px;
    border-radius: 2px;
  }

  &--line-numbers {
    .line-number {
      position: relative;
      display: block;

      &::before {
        display: inline-block;
        position: absolute;
        left: 0;
        opacity: 0.4;
        user-select: none;
        text-align: right;
        padding-right: $line-number-char-width;
      }
    }
  }

  &--error {
    outline: 1px solid $pt-intent-danger;
  }

  &--warning {
    outline: 1px solid $pt-intent-warning;
  }

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

    &.italic {
      font-style: italic;
    }

    &.entity {
      cursor: help;
    }

    .namespace {
      color: var(--code-namespace);
    }

    &.hexcode,
    &.selector {
      color: var(--code-selector);
    }

    &.punctuation {
      color: var(--code-punctuation);
    }

    &.function,
    &.builtin {
      color: var(--code-function);
    }

    &.char,
    &.constant {
      color: var(--code-constant);
    }

    &.operator {
      color: var(--code-operator);
    }

    &.keyword {
      color: var(--code-keyword);

      > .token.property,
      > .token.property + .token.punctuation,
      > .token.property + .token.punctuation + .token.number + .token.unit,
      > .token.number,
      > .token.unit {
        color: var(--code-keyword);
      }
    }

    &.attr-value {
      color: var(--code-value);
    }

    &.string {
      color: var(--code-string);
    }

    &.unit,
    &.symbol,
    &.property-line {
      color: var(--code-symbol);
    }

    &.url {
      color: var(--code-url);
    }

    &.tag,
    &.deleted {
      color: var(--code-tag);
    }

    &.comment,
    &.prolog,
    &.cdata {
      color: var(--code-comment);
      font-style: italic;
    }

    &.doctype {
      color: var(--code-doctype);
      font-style: italic;
    }

    &.property,
    &.attr-name,
    &.atrule,
    &.key,
    &.inserted {
      color: var(--code-property);
    }

    &.entity,
    &.class-name {
      color: var(--code-entity);
    }

    &.number {
      color: var(--code-number);
    }

    &.rule,
    &.regex,
    &.variable {
      color: var(--code-variable);
    }

    &.important {
      color: var(--code-important);
    }

    &.boolean {
      color: var(--code-boolean);
    }
  }
}

.CodeEditor {
  &--line-numbers {
    textarea {
      outline: none;
    }

    @for $i from 1 through 6 {
      &--#{$i} {
        pre {
          padding-left: $line-number-char-width * $i + $line-number-char-width + $line-padding-left !important;
        }

        textarea {
          // Need to use margin here since CodeEditor supports padding: https://github.com/stoplightio/ui-kit/blob/fd1334753a22d527b803b8554bc51761c348d319/src/CodeEditor/index.tsx#L13
          margin-left: $line-number-char-width * $i + $line-number-char-width + $line-padding-left !important;
        }

        .line-number {
          margin-left: -$line-number-char-width * $i - $line-number-char-width;

          &::before {
            width: $line-number-char-width * $i + $line-number-char-width;
          }
        }
      }
    }
  }

  .line-number {
    &::before {
      counter-increment: line;
      content: counter(line);
    }
  }
}

.CodeViewer {
  .token {
    animation: set-color 0.3s ease-out;
  }

  &--line-numbers {
    @for $i from 1 through 6 {
      &--#{$i} {
        padding-left: $line-number-char-width * $i + $line-number-char-width + $line-padding-left !important;

        .line-number {
          margin-left: -$line-number-char-width * $i - $line-number-char-width;
          padding-left: $line-number-char-width * $i + $line-number-char-width;

          &::before {
            width: $line-number-char-width * $i + $line-number-char-width;
          }
        }
      }
    }
  }

  .line-number {
    &::before {
      content: attr(data-node-index);
    }
  }
}