@import "mixins/mixins";
@import "common/var";

@include b(virtual-tree) {

  // virtual-tree-ul {}
  .virtual-tree {

    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    -moz-user-select: none;
    /*火狐*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /*早期浏览器*/
    user-select: none;
  }

  .virtual-tree-phantom {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 100%;
    z-index: -1;
  }

  .virtual-tree-list {
    left: 0;
    right: 0;
    top: 0;
    /* position: absolute; */
    text-align: left;
  }

  .virtual-tree-item {
    font-size: 14px;
    color: #23262e;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    /* border-bottom: 1px solid #999; */

    &>div {
      display: inline-block;
      // margin-right: 8px;
      width: 12px;
      height: 12px;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .no-check {
      border: 1px solid rgb(229, 230, 235);
      background-color: rgb(255, 255, 255);
    }

    .check {
      width: 14px;
      height: 14px;
      background-color: rgb(22, 93, 255);

      .check-graphical {
        width: 3px;
        height: 6px;
        border-right: 2px solid white;
        border-bottom: 2px solid white;
        transform: rotate(40deg);
      }
    }

    .half-check {
      width: 14px;
      height: 14px;
      background-color: rgb(22, 93, 255);

      .half-check-graphical {
        width: 7px;
        height: 2px;
        border-radius: 5px;
        background-color: white;
      }
    }

    &:hover {
      background-color: #f5f7fe;
      color: $--color-primary;
      cursor: pointer;
      border-radius: 2px;
    }

    .tree-expand-wrapper {
      padding: 6px 8px;
      // padding-right: 0px;
      cursor: pointer;
      width: 10px;

      .tree-icon-expand {
        vertical-align: middle;
        transition-duration: 0.3s;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-left: 5px solid #4e5969;
        color: rgb(29, 33, 41);
      }

      .no-expand {
        width: 10px;
        border: 0;
        display: inherit;
      }

      .clickAble {
        cursor: pointer;
      }

      .rotate90 {
        transform: rotate(90deg);
      }
    }
  }

  @-webkit-keyframes sk-rotateplane {
    0% {
      -webkit-transform: perspective(12px);
    }

    50% {
      -webkit-transform: perspective(12px) rotateY(180deg);
    }

    100% {
      -webkit-transform: perspective(12px) rotateY(180deg) rotateX(180deg);
    }
  }

  @keyframes sk-rotateplane {
    0% {
      transform: perspective(12px) rotateX(0deg) rotateY(0deg);
      -webkit-transform: perspective(12px) rotateX(0deg) rotateY(0deg);
    }

    50% {
      transform: perspective(12px) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(12px) rotateX(-180.1deg) rotateY(0deg);
    }

    100% {
      transform: perspective(12px) rotateX(-180deg) rotateY(-179.9deg);
      -webkit-transform: perspective(12px) rotateX(-180deg) rotateY(-179.9deg);
    }
  }
}