@import 'main';
@import 'icomoon_codes';

.ReactJSONEditor {
  height: 100%;
  border: none;
}

div.jsoneditor-outer.has-nav-bar.has-main-menu-bar {
  margin-top: -35px !important;
  padding-top: 35px !important;
  padding-bottom: 16px;
}

div.jsoneditor-outer.has-status-bar {
  padding-bottom: 0;
  margin-bottom: 0;
  height: calc(100% + 9px);
}

.ace-jsoneditor {
  border: none !important;
}

.jsoneditor > .jsoneditor-menu {
  background-color: $color_paper;
  border: 1px solid $color_grey;
  margin-left: -1px;
  width: calc(100% + 2px);
  @include border-radius($default_border_radius $default_border_radius 0 0);

  @include flexbox();
  @include justify-content(flex-end);
  margin-top: -10px;
  button {
    @include icomoon();
    background: none;
    color: $color_grey;
    font-size: 20px;
    opacity: 1;
    @include transition();
    cursor: pointer;
    &:hover, &:focus, &:active {
      color: $color_dark;
    }
    margin-left: 16px;
  }
}

.jsoneditor {
  border: 1px solid $color_grey !important;
  @include border-radius();

  &-highlight {
    background-color: $color_light_bright !important;
  }
  &-search {
    position: relative !important;
    border: 1px solid $color_table_border !important;
    margin-top: -30px;
    .jsoneditor_results {
      width: 0 !important;
    }
    td {
      .jsoneditor-refresh, .jsoneditor-previous, .jsoneditor-next {
        margin: 0 !important;
        background-color: $color_paper !important;
        &:hover, &:focus {
          background-color: $color_paper !important;
        }
      }
    }
    button {
      margin: 0 !important;
      background-color: $color_paper !important;
      &:hover, &:focus {
        background-color: $color_paper !important;
      }
    }
    .jsoneditor-results {
      display: none !important;
    }
    .jsoneditor-next {
      margin-right: 2px !important;
    }
    .jsoneditor-refresh {
      margin-right: 3px !important;
    }
  }
  &-type-modes {
    background-color: $color_paper !important;
    width: 84px !important;
    &:hover {
      background-color: $color_light !important;
      .jsoneditor-text {
        color: $color_primary;
      }
    }
  }
  &-modes {
    li {
      padding-left: 0 !important;
      margin: 0;
      border-bottom: 1px solid $color_light_bright;
      padding-top: 5px;
      button {
        margin: 0 !important;
      }
    }
    li:last-child {
      border: none;
      border-top: 1px solid $color_light_bright;
    }
    li:first-child {
      display: none;
    }
    button {
      color: $color_dark !important;
      margin-left: 0 !important;
    }
    .jsoneditor-menu {
      color: $color_dark !important;
      width: 80px !important;
      border: 1px solid $color_light;
      @include box-shadow($box_shadow_light_hover);
    }
  }
  &-statusbar {
    display: none;
  }

  .ace-jsoneditor .ace_marker-layer .ace_active-line {
    background: #f9f9fb;
  }
}

.ace-jsoneditor {
  border: 1px solid $color_table_border;
}

.jsoneditor-poweredBy {
  display: none;
}

.ace {
  &_gutter {
    background-color: $color_light_bright !important;
    width: 66px;
    &-cell {
      color: $color_grey;
      font: 14px $font_roboto;
    }
    &_active-line {
      background-color: $color_table_border !important;
      color: $color_dark !important;
    }
  }
  &_variable {
    color: $color_dark !important;
  }
}

.jsoneditor-tree .jsoneditor-string, .ace_string {
  color: $color_secondary !important;
}

.jsoneditor-tree .jsoneditor-menu li {
  margin: 0 !important;
  padding-left: 0;
  & button {
    margin: 0 !important;
  }
}

.jsoneditor-field, .jsoneditor-value, .jsoneditor-string {
  &:hover, &:focus {
    background-color: $color_table_border !important;
    border: 1px solid $color_table_border !important;
  }
}

.jsoneditor-tree {
  .jsoneditor-collapsed:after {
    content: '\25B6';
  }
  .jsoneditor-expanded:after {
    content: '\25BC';
  }
  button.jsoneditor-contextmenu:after {
    content: '\25A0';
  }
}

.jsoneditor-menu {
  button .jsoneditor-expand:after {
    content: '\25B6';
    margin-left: 5px;
  }
}

.jsoneditor {
  &-format:before {
    content: unicode($icon-jsoneditor-format);
  }
  &-compact:before {
    content: unicode($icon-jsoneditor-compact);
  }
  &-repair:before {
    content: unicode($icon-jsoneditor-repair);
  }
  &-expand-all:before {
    content: unicode($icon-jsoneditor-expand-all);
  }
  &-collapse-all:before {
    content: unicode($icon-jsoneditor-collapse-all);
  }
}