@import (reference) '../extend.less';
.yo-tree-layout {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  .ant-layout-sider {
    background-color: @white;
    .ant-layout-header {
      height: @layout-header-height - 20px;

      background-color: @white;
      .header-actions {
        .ant-input-search {
          margin: (@layout-header-height - 20px - 32px) / 2 @padding-md;
        }
      }
    }
  }
  &--collapsed {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 4;

    transform: translateX(-100%);
    &.open {
      transform: translateX(0);

      box-shadow: 2px 0 8px fade(@black , 20%);
    }
  }
  &--bar {
    line-height: 20px;

    height: 20px;
    padding: 0 @padding-md;

    text-align: right;
    >.anticon {
      margin-left: @padding-xs;

      cursor: pointer;

      color: fade(@black, 50%);
      &:hover {
        color: fade(@black, 80%);
      }
    }
  }
  &--content {
    position: absolute;
    top: @layout-header-height;
    left: 0;
    bottom: 0;

    overflow-y: auto;

    width: 100%;
    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;

      background-color: @white;
    }
    &::-webkit-scrollbar-thumb {
      background-color: transparent;
    }
    &:hover::-webkit-scrollbar-thumb {
      background-color: fade(@black, 30%);
    }
    &::-webkit-scrollbar-thumb:active {
      background-color: fade(@black, 45%);
    }
  }
  .ant-tree {
    color: fade(@black, 60%);
  }
}