@alifd/next/es/tree/index.css

.next-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  top: 0;
  margin: -1px; }

.next-tree {
  box-sizing: border-box; }
  .next-tree *,
  .next-tree *:before,
  .next-tree *:after {
    box-sizing: border-box; }
  .next-tree, .next-tree-child-tree {
    margin: 0;
    padding: 0;
    list-style: none; }
  .next-tree-node {
    white-space: nowrap; }
  .next-tree-node-inner {
    font-size: 0;
    outline: none; }
  .next-tree-node-label-wrapper {
    display: inline-block;
    margin: 0 4px;
    margin: 0 var(--tree-node-title-margin, 4px);
    vertical-align: middle; }
  .next-tree-node-label {
    height: 20px;
    height: var(--tree-node-title-height, 20px);
    line-height: 20px;
    line-height: var(--tree-node-title-height, 20px);
    padding: 0 4px;
    padding: 0 var(--tree-node-title-padding, 4px);
    border-radius: 3px;
    border-radius: var(--tree-node-title-border-radius, 3px);
    font-size: 12px;
    font-size: var(--tree-node-title-font-size, 12px); }
    .next-tree-node-label .next-icon {
      font-size: 14px;
      font-size: calc(var(--tree-node-title-font-size, 12px) + 2px); }
      .next-tree-node-label .next-icon::before {
        font-size: 12px;
        font-size: var(--tree-node-title-font-size, 12px);
        width: 12px;
        width: var(--tree-node-title-font-size, 12px);
        margin-right: .5em; }
  .next-tree-node-input.next-input {
    margin: 0 4px;
    margin: 0 var(--tree-node-title-margin, 4px); }
  .next-tree-node-indent-unit {
    display: inline-block;
    width: 24px;
    width: var(--tree-child-indent, 24px);
    vertical-align: middle;
    position: relative; }
    .next-tree-node-indent-unit.next-line::before {
      content: '';
      position: absolute;
      display: inline-block;
      border-left: 1px solid #C4C6CF;
      border-left: var(--tree-line, 1px solid #C4C6CF);
      height: 28px;
      height: calc(var(--tree-node-padding, 4px) + var(--line-2, 2px)*2 + var(--tree-node-title-height, 20px));
      left: 7.5px;
      left: calc(var(--tree-switch-size, 16px)/2 - var(--tree-line-width, 1px)/2); }
  .next-tree-switcher {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    margin-right: var(--tree-switch-margint-right, 8px); }
  .next-tree .next-tree-unfold-icon::before {
    content: "";
    content: var(--tree-unfold-icon-content, ""); }
  .next-tree-switcher.next-noline {
    width: 12px;
    width: var(--tree-switch-arrow-size, 12px);
    height: 12px;
    height: var(--tree-switch-arrow-size, 12px);
    line-height: 12px;
    line-height: var(--tree-switch-arrow-size, 12px);
    cursor: pointer; }
    .next-tree-switcher.next-noline .next-tree-switcher-icon {
      transition: transform 100ms linear;
      transition: transform var(--motion-duration-immediately, 100ms) var(--motion-linear, linear);
      color: #999999;
      color: var(--tree-switch-arrow-color, #999999); }
      .next-tree-switcher.next-noline .next-tree-switcher-icon:before,
      .next-tree-switcher.next-noline .next-tree-switcher-icon .next-icon-remote {
        width: 12px;
        width: var(--tree-switch-arrow-size, 12px);
        font-size: 12px;
        font-size: var(--tree-switch-arrow-size, 12px);
        line-height: inherit; }
    .next-tree-switcher.next-noline .next-tree-fold-icon::before {
      content: "";
      content: var(--tree-fold-icon-content, ""); }
    .next-tree-switcher.next-noline.next-close .next-tree-switcher-icon {
      transform: rotate(-90deg); }
      .next-tree-switcher.next-noline.next-close .next-tree-switcher-icon:before,
      .next-tree-switcher.next-noline.next-close .next-tree-switcher-icon .next-icon-remote {
        width: 12px;
        width: var(--tree-switch-arrow-size, 12px);
        font-size: 12px;
        font-size: var(--tree-switch-arrow-size, 12px);
        line-height: inherit; }
    .next-tree-switcher.next-noline:not(.next-disabled):hover .next-tree-switcher-icon {
      color: #333333;
      color: var(--tree-switch-hover-arrow-color, #333333); }
    .next-tree-switcher.next-noline.next-disabled {
      cursor: not-allowed; }
      .next-tree-switcher.next-noline.next-disabled .next-tree-switcher-icon {
        color: #CCCCCC;
        color: var(--tree-node-disabled-color, #CCCCCC); }
  .next-tree-switcher.next-noop-noline {
    width: 12px;
    width: var(--tree-switch-arrow-size, 12px);
    height: 12px;
    height: var(--tree-switch-arrow-size, 12px); }
  .next-tree-switcher.next-line {
    width: 16px;
    width: var(--tree-switch-size, 16px);
    height: 16px;
    height: var(--tree-switch-size, 16px);
    line-height: 14px;
    line-height: calc(var(--tree-switch-size, 16px) - var(--tree-switch-border-width, 1px)*2);
    border: 1px solid #C4C6CF;
    border: var(--tree-switch-border-width, 1px) var(--line-solid, solid) var(--tree-switch-border-color, #C4C6CF);
    border-radius: 3px;
    border-radius: var(--tree-switch-corner, 3px);
    background-color: #FFFFFF;
    background-color: var(--tree-switch-bg-color, #FFFFFF);
    cursor: pointer; }
    .next-tree-switcher.next-line .next-tree-switcher-icon {
      margin-left: 3px;
      margin-left: calc(var(--tree-switch-size, 16px)/2 - var(--tree-switch-icon-size, 8px)/2 - var(--tree-switch-border-width, 1px)*2/2);
      color: #666666;
      color: var(--tree-switch-icon-color, #666666); }
      .next-tree-switcher.next-line .next-tree-switcher-icon:before,
      .next-tree-switcher.next-line .next-tree-switcher-icon .next-icon-remote {
        width: 8px;
        width: var(--tree-switch-icon-size, 8px);
        font-size: 8px;
        font-size: var(--tree-switch-icon-size, 8px);
        line-height: inherit; }
      @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
        .next-tree-switcher.next-line .next-tree-switcher-icon {
          transform: scale(0.5);
          margin-left: -1px;
          margin-left: calc(var(--tree-switch-size, 16px)/2 - var(--tree-switch-icon-size, 8px)/2 - var(--tree-switch-border-width, 1px)*2/2 - var(--icon-s, 16px)/2 + var(--tree-switch-icon-size, 8px)/2);
          margin-right: -4px;
          margin-right: calc(0px - var(--icon-s, 16px)/2 + var(--tree-switch-icon-size, 8px)/2); }
          .next-tree-switcher.next-line .next-tree-switcher-icon:before {
            width: 16px;
            width: var(--icon-s, 16px);
            font-size: 16px;
            font-size: var(--icon-s, 16px); } }
    .next-tree-switcher.next-line .next-tree-switcher-fold-icon::before {
      content: "";
      content: var(--tree-switcher-fold-icon-content, ""); }
    .next-tree-switcher.next-line .next-tree-switcher-unfold-icon::before {
      content: "";
      content: var(--tree-switcher-unfold-icon-content, ""); }
    .next-tree-switcher.next-line:not(.next-disabled):hover {
      border-color: #A0A2AD;
      border-color: var(--tree-switch-hover-border-color, #A0A2AD);
      background-color: #F2F3F7;
      background-color: var(--tree-switch-hover-bg-color, #F2F3F7); }
      .next-tree-switcher.next-line:not(.next-disabled):hover .next-tree-switcher-icon {
        color: #333333;
        color: var(--tree-switch-hover-icon-color, #333333); }
    .next-tree-switcher.next-line.next-disabled {
      border-color: #E6E7EB;
      border-color: var(--color-line1-1, #E6E7EB);
      background-color: #FFFFFF;
      cursor: not-allowed; }
      .next-tree-switcher.next-line.next-disabled .next-tree-switcher-icon {
        color: #CCCCCC;
        color: var(--tree-node-disabled-color, #CCCCCC); }
  .next-tree-switcher.next-noop-line {
    width: 16px;
    width: var(--tree-switch-size, 16px);
    height: 16px;
    height: var(--tree-switch-size, 16px); }
  .next-tree-switcher.next-noop-line-noroot {
    height: 0;
    border-left: 1px solid #C4C6CF;
    border-left: var(--tree-switch-border-width, 1px) var(--line-solid, solid) var(--tree-line-color, #C4C6CF);
    border-bottom: 1px solid #C4C6CF;
    border-bottom: var(--tree-line, 1px solid #C4C6CF); }
    .next-tree-switcher.next-noop-line-noroot .next-tree-right-angle {
      bottom: -1px;
      bottom: calc(0px - var(--tree-line-width, 1px)); }
  .next-tree-switcher.next-loading.next-loading-noline {
    width: 12px;
    width: var(--tree-switch-arrow-size, 12px);
    height: 12px;
    height: var(--tree-switch-arrow-size, 12px);
    line-height: 12px;
    line-height: var(--tree-switch-arrow-size, 12px); }
  .next-tree-switcher.next-loading.next-loading-line {
    width: 16px;
    width: var(--tree-switch-size, 16px);
    height: 16px;
    height: var(--tree-switch-size, 16px);
    line-height: 14px;
    line-height: calc(var(--tree-switch-size, 16px) - var(--tree-switch-border-width, 1px)*2);
    border: 1px solid transparent;
    border: var(--tree-switch-border-width, 1px) var(--line-solid, solid) transparent; }
  .next-tree-switcher.next-loading .next-tree-switcher-icon {
    color: #5584FF;
    color: var(--color-brand1-6, #5584FF); }
    .next-tree-switcher.next-loading .next-tree-switcher-icon:before,
    .next-tree-switcher.next-loading .next-tree-switcher-icon .next-icon-remote {
      width: 12px;
      width: var(--tree-switch-arrow-size, 12px);
      font-size: 12px;
      font-size: var(--tree-switch-arrow-size, 12px);
      line-height: inherit; }
  .next-tree-right-angle {
    position: absolute;
    bottom: 6.5px;
    bottom: calc(var(--tree-switch-size, 16px)/2 - var(--tree-switch-border-width, 1px)*2/2 - var(--tree-line-width, 1px)/2);
    left: -17.5px;
    left: var(--tree-child-right-angle-left, -17.5px);
    display: block;
    width: 16.5px;
    width: var(--tree-child-right-angle-width, 16.5px);
    height: 22px;
    height: calc(var(--tree-node-title-height, 20px) + var(--tree-node-padding, 4px) - var(--tree-line-width, 1px)*2);
    border-left: 1px solid #C4C6CF;
    border-left: var(--tree-line, 1px solid #C4C6CF);
    border-bottom: 1px solid #C4C6CF;
    border-bottom: var(--tree-line, 1px solid #C4C6CF); }
  .next-tree.next-label-block .next-tree-node-inner {
    display: flex;
    align-items: center;
    outline: none; }
  .next-tree.next-label-block .next-tree-node-label-wrapper {
    flex: 1 1 auto; }
  .next-tree.next-node-indent .next-tree-node .next-tree-node {
    margin-left: 24px;
    margin-left: var(--tree-child-indent, 24px); }
  .next-tree.next-node-indent .next-tree-node-inner {
    padding-top: 2px;
    padding-top: calc(var(--tree-node-padding, 4px)/2);
    padding-bottom: 2px;
    padding-bottom: calc(var(--tree-node-padding, 4px)/2); }
    .next-tree.next-node-indent .next-tree-node-inner:focus .next-tree-node-label {
      color: #333333;
      color: var(--tree-node-hover-color, #333333);
      background-color: #F2F3F7;
      background-color: var(--tree-node-hover-bg-color, #F2F3F7); }
  .next-tree.next-node-indent .next-tree-node-label-wrapper {
    border-top: 2px solid transparent;
    border-top: var(--line-2, 2px) solid transparent;
    border-bottom: 2px solid transparent;
    border-bottom: var(--line-2, 2px) solid transparent; }
  .next-tree.next-node-indent .next-tree-node-label {
    transition: color 100ms linear, background-color 100ms linear;
    transition: color var(--motion-duration-immediately, 100ms) var(--motion-linear, linear), background-color var(--motion-duration-immediately, 100ms) var(--motion-linear, linear);
    cursor: default;
    color: #333333;
    color: var(--tree-node-normal-color, #333333);
    background-color: #FFFFFF;
    background-color: var(--tree-node-normal-background, #FFFFFF); }
  .next-tree.next-node-indent .next-tree-node-label-selectable {
    cursor: pointer; }
  .next-tree.next-node-indent .next-tree-node-label:hover {
    color: #333333;
    color: var(--tree-node-hover-color, #333333);
    background-color: #F2F3F7;
    background-color: var(--tree-node-hover-bg-color, #F2F3F7); }
  .next-tree.next-node-indent .next-tree-node-inner.next-selected .next-tree-node-label {
    color: #333333;
    color: var(--tree-node-selected-color, #333333);
    background-color: #DEE8FF;
    background-color: var(--tree-node-selected-background, #DEE8FF); }
  .next-tree.next-node-indent .next-tree-node-inner.next-disabled .next-tree-node-label,
  .next-tree.next-node-indent .next-tree-node-inner.next-disabled .next-tree-node-label:hover {
    color: #CCCCCC;
    color: var(--tree-node-disabled-color, #CCCCCC);
    background-color: #FFFFFF;
    background-color: var(--tree-node-disabled-background, #FFFFFF);
    cursor: not-allowed; }
  .next-tree.next-node-indent .next-tree-node-inner.next-drag-over .next-tree-node-label {
    background-color: #5584FF;
    background-color: var(--color-brand1-6, #5584FF);
    color: #FFFFFF;
    opacity: .8; }
  .next-tree.next-node-indent .next-tree-node-inner.next-drag-over-gap-top .next-tree-node-label-wrapper {
    border-top-color: #5584FF;
    border-top-color: var(--color-brand1-6, #5584FF); }
  .next-tree.next-node-indent .next-tree-node-inner.next-drag-over-gap-bottom .next-tree-node-label-wrapper {
    border-bottom-color: #5584FF;
    border-bottom-color: var(--color-brand1-6, #5584FF); }
  .next-tree.next-node-block .next-tree-node-inner {
    padding-top: 4px;
    padding-top: var(--tree-node-padding, 4px);
    padding-bottom: 4px;
    padding-bottom: var(--tree-node-padding, 4px);
    transition: color 100ms linear, background-color 100ms linear;
    transition: color var(--motion-duration-immediately, 100ms) var(--motion-linear, linear), background-color var(--motion-duration-immediately, 100ms) var(--motion-linear, linear);
    cursor: pointer;
    color: #333333;
    color: var(--tree-node-normal-color, #333333);
    background-color: #FFFFFF;
    background-color: var(--tree-node-normal-background, #FFFFFF); }
    .next-tree.next-node-block .next-tree-node-inner:hover, .next-tree.next-node-block .next-tree-node-inner:focus {
      color: #333333;
      color: var(--tree-node-hover-color, #333333);
      background-color: #F2F3F7;
      background-color: var(--tree-node-hover-bg-color, #F2F3F7); }
    .next-tree.next-node-block .next-tree-node-inner.next-selected {
      color: #333333;
      color: var(--tree-node-selected-color, #333333);
      background-color: #DEE8FF;
      background-color: var(--tree-node-selected-background, #DEE8FF); }
    .next-tree.next-node-block .next-tree-node-inner.next-disabled, .next-tree.next-node-block .next-tree-node-inner.next-disabled:hover {
      color: #CCCCCC;
      color: var(--tree-node-disabled-color, #CCCCCC);
      background-color: #FFFFFF;
      background-color: var(--tree-node-disabled-background, #FFFFFF);
      cursor: not-allowed; }
  .next-tree.next-show-line .next-tree-node .next-tree-node:not(:last-child) {
    margin-left: 7.5px;
    margin-left: var(--tree-child-indent-left, 7.5px);
    border-left: 1px solid #C4C6CF;
    border-left: var(--tree-line, 1px solid #C4C6CF);
    padding-left: 15.5px;
    padding-left: var(--tree-child-indent-right, 15.5px); }
  .next-tree-node.next-filtered > .next-tree-node-inner .next-tree-node-label {
    color: #5584FF;
    color: var(--color-brand1-6, #5584FF); }
    .next-tree-node.next-filtered > .next-tree-node-inner .next-tree-node-label:hover {
      color: #5584FF;
      color: var(--color-brand1-6, #5584FF); }

.next-tree[dir='rtl'] .next-tree-switcher {
  margin-left: 8px;
  margin-left: var(--tree-switch-margint-right, 8px);
  margin-right: 0; }

.next-tree[dir='rtl'] .next-tree-switcher.next-noop-line-noroot {
  border-left: none;
  border-right: 1px solid #C4C6CF;
  border-right: var(--tree-switch-border-width, 1px) var(--line-solid, solid) var(--tree-line-color, #C4C6CF); }

.next-tree[dir='rtl'] .next-tree-right-angle {
  left: auto;
  right: -17.5px;
  right: var(--tree-child-right-angle-left, -17.5px);
  border-left: none;
  border-right: 1px solid #C4C6CF;
  border-right: var(--tree-line, 1px solid #C4C6CF); }

.next-tree[dir='rtl'].next-show-line .next-tree-node .next-tree-node:not(:last-child) {
  margin-left: 0;
  margin-right: 7.5px;
  margin-right: var(--tree-child-indent-left, 7.5px);
  border-left: none;
  border-right: 1px solid #C4C6CF;
  border-right: var(--tree-line, 1px solid #C4C6CF);
  padding-left: 0;
  padding-right: 15.5px;
  padding-right: var(--tree-child-indent-right, 15.5px); }

.next-tree[dir='rtl'].next-node-indent .next-tree-node .next-tree-node {
  margin-left: 0;
  margin-right: 24px;
  margin-right: var(--tree-child-indent, 24px); }