@import "./variable.scss";

.common-nav-folder {
  margin-bottom: 20px;
  padding-left: 30px;
  line-height: 40px;

  &.expandable {
    overflow: hidden;
    height: 40px;

    &.expanded {
      height: auto;

      .common-nav-title::after {
        transform: rotate(180deg);
      }
    }
    .common-nav-title {
      cursor: pointer;

      &:hover {
        color: #999;
      }

      &::after {
        transform: rotate(0);
        transition: transform .3s;

        margin-right: 20px;
        display: block;
        float: right;
        content: "\e610";
        font-family: "iconfont" !important;
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
    }
  }
}
.common-nav-item {
  cursor: pointer;
  padding: 0 6px 0 60px;
  margin-left: -38px;

  &:hover {
    background: #edf1f5;
  }

  &.active {
    border-right: 3px solid $primary;

    .common-nav-link {
      color: $primary;
    }
  }
}
.common-nav-title {
  color: #666;
  font-weight: 100;
  text-transform: capitalize;
}
.common-nav-link {
  color: #666;
  display: block;
  width: 100%;
  height: 34px;
  line-height: 34px;
  font-size: 14px;
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}