$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";
        }
      }
    }
  }
}
