@import '../../../styles';

// TODO: simplify the CSS needed to correctly highlight the selection

@mixin json-node-selected-mixin(
  $selection-background,
  $insert-area-background,
  $insert-area-background-highlight
) {
  // entry selected
  &.jse-selected {
    .jse-header,
    .jse-contents,
    .jse-meta,
    .jse-expand,
    .jse-footer,
    :global(.jse-key),
    :global(.jse-value) {
      background: $selection-background !important;
      cursor: grab;
    }

    .jse-expand {
      cursor: pointer;
    }
  }

  // key selected
  &.jse-selected-key {
    > .jse-contents-outer > .jse-contents > :global(.jse-identifier) > :global(.jse-key),
    > .jse-header-outer > .jse-header > :global(.jse-identifier) > :global(.jse-key) {
      background: $selection-background;
      cursor: grab;
    }
  }

  // value selected (part 1)
  &.jse-selected-value > .jse-contents-outer > .jse-contents > :global(.jse-value) {
    background: $selection-background;
    cursor: grab;
  }

  :global(.jse-collapsed-items.jse-selected),
  &.jse-selected :global(.jse-collapsed-items),
  &.jse-selected-value :global(.jse-collapsed-items) {
    // TODO: this css is copied from CollapsedItems.scss. Figure out how to reuse this smartly with CSS or SASS
    background-color: $selection-background;
    cursor: grab;

    $shape-color: var(--jse-collapsed-items-selected-background-color);
    background-image: linear-gradient($shape-color, $shape-color),
      linear-gradient(to bottom right, transparent 50.5%, $shape-color 50.5%),
      linear-gradient(to bottom left, transparent 50.5%, $shape-color 50.5%),
      linear-gradient(to top right, transparent 50.5%, $shape-color 50.5%),
      linear-gradient(to top left, transparent 50.5%, $shape-color 50.5%);
  }

  // value selected (part 2)
  &.jse-selected-value {
    .jse-meta,
    > .jse-header-outer > .jse-header > .jse-meta,
    > .jse-footer-outer > .jse-footer,
    .jse-props .jse-contents,
    .jse-props .jse-header,
    .jse-props .jse-footer,
    .jse-props .jse-expand,
    .jse-items .jse-contents,
    .jse-items .jse-header,
    .jse-items .jse-footer,
    .jse-items .jse-expand {
      background: $selection-background !important;

      :global(.jse-key),
      :global(.jse-value) {
        background: $selection-background;
        cursor: grab;
      }
    }
  }

  .jse-insert-area {
    &.jse-selected {
      z-index: 2;
      outline-color: $insert-area-background;
    }
  }

  .jse-insert-area {
    &.jse-selected {
      :global(.jse-context-menu-button) {
        background: $insert-area-background;

        &:hover {
          background: $insert-area-background-highlight;
        }
      }
    }
  }
}