@import '../constants/fonts';

.editor {
  .nunjucks-tag {
    font-family: @font-monospace !important;
    padding: 0.13em 0.5em;
    box-sizing: border-box;
    margin: 0 0.1em;
    position: relative;
    font-size: 0.9em;
    line-height: 1em; // Need this for CodeMirror line-height math
    cursor: default;
    white-space: nowrap;
    text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.4);

    &::after {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      content: ' ';
      z-index: -1;
      border-radius: 0.2em;
      box-sizing: border-box;
      box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.4);
      transition: background-color 300ms;

      // not so bright!
      opacity: 0.8;
      filter: grayscale(20%);
    }

    label {
      padding: 0;
      margin: 0;
      display: inline;
      font-style: italic;
      font-size: 0.9em;

      i.fa {
        font-family: FontAwesome, sans-serif !important;
        font-size: 0.9em;
        min-width: 1em;
        margin: 0 0.5em 0 0;
      }
    }

    &.nunjucks-tag {
      color: var(--color-font-info);
      &::after {
        background: var(--color-info);
      }
    }

    &.nunjucks-variable {
      color: var(--color-font-surprise);
      &::after {
        background: var(--color-surprise);
      }
    }

    &:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    &[data-error='on'] {
      color: var(--color-font-danger);
      &::after {
        background: var(--color-danger);
      }
    }

    &[data-ignore='on']::after {
      background: var(--hl-xl);
      color: bar(--color-font);
    }
  }
}
