@import '~@capillarytech/cap-ui-library/styles/_variables';

$tree-indent-size: 1.25rem;

.hierarchy-details-panel {
  .ant-drawer-header {
    padding: 1rem 3rem;
    border-bottom: none;
  }

  .ant-drawer-body {
    padding: 1.5rem 3rem;
  }

  &__back-icon {
    margin-right: 1rem;
    cursor: pointer;
  }

  &__body {
    display: flex;
    flex-wrap: nowrap;
    padding: 1.5rem 3rem;
    gap: 1.5rem;
  }

  &__tree {
    width: 35rem;
    flex-shrink: 0;
    border-right: 0.1rem solid $CAP_G07;
    padding-right: 1rem;
    overflow-y: auto;

    .ant-tree {
      background: transparent;
      --ant-tree-title-height: 2.5rem;
    }

    .cap-tree-v1-search-row {
      display: none;
    }

    .cap-tree-v1-node-row-counter {
      display: none;
    }

    .cap-tree-v1-node-row {
      grid-template-columns: 0 20rem auto;
    }

    .ant-tree-show-line .ant-tree-indent-unit::before {
      border-inline-end-color: $CAP_G05;
    }

    .ant-tree-treenode:not(.ant-tree-treenode-leaf)
      .ant-tree-indent-unit-end:last-child {
      &::before {
        display: block !important;
        top: -0.25rem !important;
        bottom: 50% !important;
        height: auto !important;
      }

      &::after {
        $connector-elbow-reach: calc((#{$tree-indent-size} - 0.857rem) / 2);
        content: '';
        position: absolute;
        inset-inline-end: calc(-1 * #{$connector-elbow-reach});
        top: 50%;
        height: 0;
        width: calc(#{$tree-indent-size} / 2 + #{$connector-elbow-reach});
        border-bottom: 1px solid $CAP_G05;
      }
    }

    .ant-tree .ant-tree-indent-unit {
      width: $tree-indent-size;

      &::before {
        inset-inline-end: calc(#{$tree-indent-size} / 2);
      }
    }

    .ant-tree .ant-tree-switcher {
      width: $tree-indent-size;
      margin-inline-end: 0.25rem;
    }

    .ant-tree-switcher-leaf-line {
      &::before,
      &::after {
        border-color: $CAP_G05;
      }

      &::before {
        inset-inline-end: calc(#{$tree-indent-size} / 2);
      }

      &::after {
        width: calc(#{$tree-indent-size} / 2 * 0.8);
        height: calc(#{$tree-indent-size} / 2);
        top: 40%;
        transform: translateY(-50%);
      }
    }

    .cap-tree-v1-node-row-title {
      color: $CAP_G01;
      width: max-content;
    }

    .ant-tree .ant-tree-switcher-icon {
      color: $CAP_G01;
    }

    .cap-tree-v1 .ant-tree-switcher .ant-tree-switcher-icon {
      font-size: 1rem !important;
      margin-top: 0.7rem;
    }

    .ant-tree-treenode {
      width: 100%;
    }

    .ant-tree-node-content-wrapper {
      min-height: 2.5rem;
      line-height: 2.5rem;
      background-color: transparent;
      border-radius: 0;
      width: 100%;

      &:hover {
        background-color: $BG_01;
      }

      &.ant-tree-node-selected {
        position: relative;
        background-color: $CAP_PALE_GREY;
        padding-left: 0.75rem;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          height: 100%;
          width: 0.25rem;
          background-color: $CAP_LINK_BLUE;
        }
      }
    }
  }

  &__conditions {
    flex: 1;
    min-width: 0;
  }

  &__conditions-heading {
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
}