@node-color: #1890ff;
@line-width: 1px;
@line-color: @node-color;
@expand-icon-size: 16px;

.orgChartContainer {
  display: inline-block;

  :global {
    table {
      border-collapse: separate;
      border-spacing: 0;
      line-height: 1.5715;

      tr {
        &.hidden {
          display: none !important;
        }

        &.lines {
          position: relative;

          .expand-icon {
            display: inline-block;
            width: @expand-icon-size;
            height: @expand-icon-size;
            border-radius: 50%;
            background-color: @line-color;
            position: absolute;
            left: 50%;
            bottom: 0;
            margin-left: -@expand-icon-size / 2;
            margin-bottom: -@expand-icon-size / 2;
            z-index: 99;
            cursor: pointer;

            &-expanded,
            &-collapsed {
              &::before {
                content: '';
                width: 8px;
                height: 2px;
                background-color: #fff;
                position: absolute;
                top: 7px;
                left: 4px;
              }
            }

            &-collapsed {
              &::after {
                content: '';
                width: 2px;
                height: 8px;
                background-color: #fff;
                position: absolute;
                top: 4px;
                left: 7px;
              }
            }

            &:hover {
              background-color: darken(@line-color, 5%);
            }
          }

          td {
            height: 20px;

            .vertical-line {
              width: @line-width;
              height: 100%;
              background-color: @line-color;
              display: inline-block;
            }

            &.left {
              border-right: @line-width solid @line-color;
            }

            &.right {
              border-left: @line-width solid transparent;
            }

            &.top {
              border-top: @line-width solid @line-color;
            }
          }
        }
      }

      td {
        text-align: center;
        padding: 0;
        vertical-align: top;

        .node {
          display: inline-block;
          border: 1px solid @node-color;
          padding: 0.5rem;
          margin: 0 5px;
          cursor: pointer;
        }
      }
    }
  }
}