@import "variables";
@import "src/app/webapp-common/assets/fonts/variables";

$type-colors: (
  string: #FF6B6B,
  link: #FF6B6B,
  number: #009688,
  boolean: #b938a4,
  date: #05668D,

  array: #999,
  object: #999,
  function: #999,

  'null': #fff,
  undefined: #fff
);

.ngx-json-viewer {
  height: 100%;
  overflow: auto;
  position: relative;

  .segment {
    padding: 2px;
    margin-left: 14px;

    .segment-main {
      word-wrap: break-word;

      .toggler {
        position: absolute;
        margin-left: -24px;
        line-height: 16px;
        color: $blue-300;
        &:hover {
          color: $blue-100;
        }
        &::after {
          display: inline-block;
          font-family: $icomoon-font-family;
          content: $al-ico-ico-chevron-down;
          font-size: 18px;
          transform: rotate(-90deg);
          transition: transform 0.1s ease-in, color 0.1s ease-in;
        }
      }

      &.expanded > .toggler::after {
        transform: none;
      }

      &.expandable,
      &.expandable > .toggler {
        cursor: pointer;
      }

      .segment-key {
        color: #4E187C;
      }

      .segment-separator {
        color: #999;
      }

      .segment-value {
        color: #000;
      }
    }

    .children {
      margin-top: 2px;
    }
  }

  .found {
    &::selection {
      background-color: $white;
      color: darken($neon-yellow, 20%);
    }

    background-color: lighten($neon-yellow, 20%);
    border-radius: 4px;
    padding: 0 2px;
  }
  .current .found{
    background-color: lighten($orangada, 10%);
    &::selection {
      background-color: $white;
      color: darken($orangada, 10%);
    }
  }

  @each $type, $color in $type-colors {
    .segment-type-#{$type} > .segment-main > .segment-value {
      color: $color;
    }
  }

  // special cases need highlightted
  .segment-type-null > .segment-main > .segment-value {
    background-color: red;
  }
  .segment-type-undefined > .segment-main {
    & > .segment-key {
      color: #999;
    }
    & > .segment-value {
      background-color: #999;
    }
  }
  .segment-type-object > .segment-main,
  .segment-type-array > .segment-main {
    white-space: nowrap;
  }


  .braces.last {
    position: relative;
    left: -12px;
  }

  mat-tree-node {
    --mat-tree-node-text-size: 13px;
    --mat-tree-node-text-font: #{$font-family-monospace};
    line-height: normal;
  }
}

:host-context(.dark-theme) {
  .ngx-json-viewer {

    .segment .segment-main {


      .segment-key {
        color: $blue-250 !important;
      }
    }
  }

  @each $type, $color in $type-colors {
    .segment-type-#{$type} > .segment-main > .segment-value {
      color: $color !important;
    }
  }

  .segment-type-link > .segment-main > .segment-value > a {
    color: #ff8400 !important;
  }
}
