@import "@/assets/css/var.scss";
@import "@/assets/css/themeFn.scss";

.left-nav{
  width: 200px;
  height: 100%;
  overflow: auto;
  background-color: $left-nav-background-color;
  //background-color: $left-nav-background-color;
  padding: 10px 0;
  transition: all 0.5s;

  @include themify(){
    background-color: themed('left-nav-background-color');
  }

  &.left-nav-open{

  }

  &.left-nav-close{
    width: 50px;
  }

  .left-nav-item{
    line-height: 40px;
    .item-link{
      width: 100%;
      height: 40px;
      justify-content: space-between;
      padding: 0 15px;
      border-left: 4px solid transparent;
      &.open{
        .suffix-icon{
          transform: rotate(180deg);
        }
      }
      i{
        font-size: 14px;
      }
      .prefix-icon{
        margin-right: 10px;
      }
      .suffix-icon{
        transition: all 0.5s;
      }
      .left{

      }
      .right{
        flex: 1;
        justify-content: space-between;
      }
    }

    .left-nav-item-children{
      transition: all 0.5s;
      overflow: hidden;
      //#dde9f3
      background-color: $left-nav-children-background-color;
      @include themify(){
        background-color: themed('left-nav-children-background-color');
      }
      .left-nav-item-children-item{
        .item-link{
          width: 100%;
          height: 100%;
          justify-content: start;
          padding-left: 50px;
          .prefix-icon{
            font-size: 12px;
          }
        }
      }
    }

    .item-link{
      font-size: 12px;
      color: $text-color-label;
      cursor: pointer;
      @include themify(){
        color: themed('left-nav-font-color');
      }
      &:hover{
        border-left: 4px solid $left-nav-active-border-color;
        background: $left-nav-active-background-color;
        color: $text-color-white;

        @include themify(){
          background: themed('left-nav-active-background-color');
          border-color: themed('left-nav-active-border-color');
        }
      }
    }

    .selected{
      border-left: 4px solid $left-nav-active-border-color;
      background: $left-nav-active-background-color;
      color: $text-color-white !important;

      @include themify(){
        background: themed('left-nav-active-background-color');
        border-color: themed('left-nav-active-border-color');
      }
    }
  }

  .popover-content-render{
    .ant-popover-arrow{
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: rgba(0,0,0,0.75);
      border-left-color: rgba(0,0,0,0.75);
    }
    .ant-popover-inner{
      background: rgba(0,0,0,0.75);
      border-color: rgba(0,0,0,0.75);
      color: #ffffff;
      a{
        color: #ffffff;
        font-size: 12px;
        &:hover{
          color: #1E9FFF;
        }
      }
    }

    .popover-container{
      line-height: 30px;

    }
  }
}

