$topo-bg: inear-gradient(180deg, #d8d8d8, #d8d8d8 0, #e4e4e4 100%, #e4e4e4 0);
$topo-border-color: #aba8a8;

.rule-tree {
  float: left;
  width: 20rem;
  height: 100%;
  vertical-align: top;

  .rule-tree-header {
    height: 2.5rem;
    padding: 0 0.5rem;
    font-size: 1.2rem;
    line-height: 2.5rem;
    color: black;
    background: $topo-bg;
    border-bottom: 1px solid $topo-border-color;
  }

  .rule-tree-content {
    height: calc(100% - 2.5rem);
    padding-left: 0.5rem;
    background: white;
    border-right: 1px solid #deddde;

    .ant-tree {
      font-size: 1.2rem;

      li {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .ant-tree-node-content-wrapper {
          color: black;
        }
      }

      .ant-tree-switcher {
        color: rgba(64, 80, 157, 1);
      }

      .ant-tree-switcher_open {
        font-family: 'amosicon' !important;
        font-size: 1.4rem;

        &::after {
          content: '\e6f9';
        }
      }

      .ant-tree-switcher_close {
        font-family: 'amosicon' !important;
        font-size: 1.4rem;

        &::after {
          content: '\e6e7';
        }
      }

      .ant-tree-switcher-noop {
        &::after {
          font-size: 1.4rem !important;
        }
      }

      .ant-tree-switcher_close {
        font-family: 'amosicon' !important;
        font-size: 1.4rem;

        &::after {
          content: '\e6e7';
        }
      }
    }
  }
}
