@use '../../../styles';
@use '../../../themes/defaults';

.jse-expand {
  width: defaults.$indent-size;
  padding: 0;
  margin: 0;
  border: none;
  cursor: pointer;
  background: transparent;
  color: defaults.$delimiter-color;
  font-size: defaults.$font-size-mono;
  height: defaults.$line-height;

  &:hover {
    opacity: 0.8;
  }
}

.jse-meta,
.jse-separator,
.jse-index,
.jse-bracket {
  vertical-align: top;
  color: defaults.$delimiter-color;
}

.jse-index {
  padding: 0 styles.$padding-half;
}

.jse-bracket {
  padding: 0 2px;

  &.jse-expanded {
    padding-right: defaults.$padding;
  }
}

.jse-identifier {
  vertical-align: top;
  position: relative;
}

.jse-json-node {
  position: relative;
  color: defaults.$text-color;

  &.jse-root {
    min-height: 100%;
    padding-bottom: styles.$contents-padding;
    box-sizing: border-box;

    > .jse-contents-outer > .jse-contents {
      padding-left: 0;
    }
  }

  $selector-height: 8px; // must be about half a line height

  .jse-props,
  .jse-items {
    position: relative;
  }

  .jse-header-outer,
  .jse-footer-outer {
    display: flex;
    margin-left: calc(var(--level) * defaults.$indent-size);
  }

  .jse-header {
    position: relative;

    .jse-meta {
      > .jse-meta-inner {
        display: flex;
        justify-content: center;
      }
    }
  }

  .jse-contents-outer {
    display: flex;
    margin-left: calc(var(--level) * defaults.$indent-size);
  }

  .jse-header,
  .jse-contents {
    display: flex;
    flex-direction: row;
    align-items: flex-start; // important for the alignment of the context menu button and key in case of a multi line value
  }

  .jse-contents {
    padding-left: defaults.$indent-size;
    cursor: defaults.$contents-cursor;

    .jse-value-outer {
      display: inline-flex;
    }
  }

  .jse-footer {
    display: inline-flex;
    padding-left: calc(defaults.$indent-size + styles.$input-padding);
  }

  .jse-header,
  .jse-contents,
  .jse-footer {
    background: defaults.$contents-background-color;
  }

  .jse-insert-selection-area {
    padding: 0 styles.$padding-half;
    flex: 1; // must fill all left over space at the right side of the editor, so you can click there

    &.jse-inside {
      display: inline-flex;
      align-items: center;
    }

    &.jse-after {
      display: flex;
      align-items: flex-end;
    }
  }

  .jse-context-menu-pointer-anchor {
    position: relative;
  }

  .jse-insert-area {
    $height: 2px;
    $height-half: 0.5 * $height;

    display: flex;
    position: relative;
    z-index: 1; // prevent the next line half-overlapping the pointer
    margin-left: calc(var(--level) * defaults.$indent-size);

    max-width: 250px;
    min-width: 100px;
    height: 0;
    margin-right: styles.$padding-half;
    outline: $height-half solid; // color depends on hovered/selected/inactive+selected

    &.jse-hovered {
      outline-color: defaults.$context-menu-pointer-hover-background;
    }
  }

  .jse-key-outer {
    position: relative;
  }

  .jse-key-outer,
  .jse-value-outer,
  .jse-meta,
  .jse-footer {
    &:hover {
      background: defaults.$hover-background-color;
      cursor: defaults.$contents-cursor;
    }
  }

  &.jse-hovered:not(.jse-selected):not(.jse-selected-value) {
    :global(.jse-value-outer),
    :global(.jse-meta),
    :global(.jse-items .jse-header),
    :global(.jse-items .jse-contents),
    :global(.jse-props .jse-header),
    :global(.jse-props .jse-contents),
    :global(.jse-footer) {
      background: defaults.$hover-background-color;
      cursor: defaults.$contents-cursor;

      :global(.jse-value-outer),
      :global(.jse-meta) {
        // since the $hover-background-color is half transparent,
        // we have to prevent it from being applied twice, else it gets a darker color
        background: none;
      }
    }
  }

  // key and value selected
  &.jse-selected {
    .jse-header,
    .jse-contents,
    .jse-footer {
      background: defaults.$selection-background-color;
      cursor: defaults.$contents-selected-cursor;
    }

    .jse-key-outer,
    .jse-value-outer,
    .jse-meta,
    .jse-footer {
      &:hover {
        background: inherit;
        cursor: inherit;
      }
    }
  }

  // key selected
  .jse-key-outer.jse-selected-key {
    background: defaults.$selection-background-color;
    cursor: defaults.$contents-selected-cursor;
  }

  // value selected
  &.jse-selected-value {
    :global(.jse-value-outer),
    :global(.jse-meta),
    :global(.jse-items .jse-header),
    :global(.jse-items .jse-contents),
    :global(.jse-props .jse-header),
    :global(.jse-props .jse-contents),
    :global(.jse-footer) {
      background: defaults.$selection-background-color;
      cursor: defaults.$contents-selected-cursor;

      :global(.jse-key-outer) {
        &:hover {
          background: inherit;
          cursor: inherit;
        }
      }
    }
  }

  &.jse-readonly {
    --jse-contents-selected-cursor: pointer;
  }

  .jse-insert-area {
    &.jse-selected {
      outline-color: defaults.$context-menu-pointer-background;
    }
  }
}