@import "~antd/lib/style/themes/default.less";
@ease-in-out-circ: cubic-bezier(.78, .14, .15, .86);
@line: rgb(60, 64, 70);

.menuPoint(@height){
  content:'';
  height: @height;
  width: 16px;
  left:25px;
  position: absolute;
  margin: 0px;
  border-left:1px solid @line;
}
.menuHide{
  content:'';
  height: 18px;
  width: 16px;
  left:25px;
  top:0px;
  position: absolute;
  margin: 0px;
  background-image:  url('../../assets/menu_point.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0px 12px;
  opacity: 1;
}
.logo {
  height: 50px;
  position: relative;
  line-height: 50px;
  padding-left: 10px;
  transition: all .3s;
  background: #2b82d8;
  overflow: hidden;
  img {
    display: inline-block;
    vertical-align: middle;
    height: 32px;
  }
  h1 {
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin: 0 0 0 8px;
    font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-weight: 600;
  }
}
.sider {
  position: relative;
  z-index: 10;
  background:#171f25;
  :global{
    .ant-menu-sub{
      position: relative;
      padding:15px 0px;
      &:before{
        content:'';
        height: 15px;
        width: 1px;
        left:25px;
        background: @line;
        position: absolute;
        margin: 0px;
        top:0px;
      }
      .ant-menu-submenu-inline{
        position: relative;
        &:before{
          .menuPoint(15px)
        }
        &:after{
          .menuHide
        }
        &:not(:last-child){
          .ant-menu-sub{
            padding:0px;
          }
          &:before{
            .menuPoint(33px)
          }
        }
        .ant-menu-sub{
          padding:0px;
          &:before{
            height:0px;
          }
        }
        .ant-menu-item{
          &:before{
            display:none;
          }
          &:not(:last-child){
            &:before{
              display:none;
            }
          }
        }
        .ant-menu-submenu-title{
          margin: 0px;
          line-height: 30px;
          height: 30px;
        }
      }
    }
    .ant-menu-root{  
      height: ~"calc(100vh - 75px)";
      overflow-x: auto;
    }
    .ant-menu-item{
      position: relative;
      margin:0px;
      &:before{
        .menuPoint(15px)
      }
      &:after{
        .menuHide;
        transform:none;
      }
      &:not(:last-child){
        margin:0px;
        &:before{
          .menuPoint(33px)
        }
      }
      a{
        display: flex;
      }
      span{
        display: flex;
        flex:1;
      }
      span.iconfont{
        flex: 0;
      }
    }
    .ant-menu-submenu-vertical{
      .iconfont{
        display: block;
      }
    }
    .ant-menu-dark{
      // .ant-menu-item-selected{
      //   background-color: #000c17;
      //   a{
      //     color:#ffffffa6;
      //   }
      // }
      .ant-menu-item-active{
        background-color: #1890ff;
        &:after{
          border-color:#1890ff;
        }
      }
    }
    .ant-menu{
      .ant-menu-submenu-vertical{
        .ant-menu-submenu-title{
          padding: 0 !important;
          &:before{
            display: none;
          }
          .iconfont{
            left: 0px;
            position: relative;
            margin-left: 16px;
          }
        }
      }
      .ant-menu-submenu-arrow{
        &:before{
          display: none;
        }
        &:after{
          display: none;
        }
      }
    }
    .ant-menu-root{
      & > .ant-menu-item{
        &:before{
          display:none;
        }
        &:after{
          display:none;
        }
      }

    }
    .ant-layout-sider-children .ant-menu-dark{
      background:#171f25;
      color:rgba(255, 255, 255, 0.6);
    }
    .ant-menu .ant-menu-sub.ant-menu-inline > .ant-menu-item{
      height: 30px;
      line-height: 30px;
      a{
        padding-left:44px;
      }
      span > span{
        &:after{
          content: '';
          position: absolute;
          top:0px;
          height:30px;
          border-left: 1px solid @line;
          left: 25px;
        }
        padding-left:50px;
        font-size: 12px;
        i{
          top: 0px;
          line-height: 30px;
        }
        .iconfont{
          position: absolute;
          left:94px;
          &:after{
            display: none;
          }
        }
      }
    }
    .ant-menu{
      .ant-menu-submenu-title{
        .iconfont{
          position: absolute;
          left: 16px;
        }
        &:before{
          content: "";
          width: 44px;
          display: inline-block
        }
        &:after{
          content: '\E7CA';
          font-family: "iconfont" !important;
          font-size: 16px;
          display: inline-block;
          position: absolute;
          right: 14px;
        }
      }
      .ant-menu-submenu-open>.ant-menu-submenu-title{
        &:after{
          transform: rotate(180deg);
        }
      }
      .ant-menu-submenu > .ant-menu > .ant-menu-submenu{
        & > .ant-menu > .ant-menu-item{
          &:after{
            display: none;
          }
          & > a{
            font-size: 12px;
            padding-left:50px;
            &:before{
              height:30px;
              border-left: 1px solid @line;
              left: 25px;
            }
          }
        }
        &:last-child > .ant-menu > .ant-menu-item {
          & > a{
            &:before{
              display: none;
            }
          }
          span > span{
            &:after{
              display:none;
            }
          }
        }
      }
    }
    .ant-breadcrumb{
      span{
        font-size: 12px;
      }
    }
  }
}
.right{
  position: absolute;
  right: 0px;
  top:13px;
  font-size: 12px;
  font-weight: bold;
}
:global {
  .drawer .drawer-content {
    background: #001529;
  }
}
.pop{
  :global{
    .ant-popover-content{
      padding-left:7px;
    }
    .ant-popover-arrow{
      display: none;
    }
    .ant-popover-inner-content{
      padding:8px 0px;
    }
    .ant-popover-inner{
      width: 160px;
      background:#00142a;
      a{
        color: #fff;
        text-decoration: none;
        padding: 4px 0px 4px 14px;
        display: block;
      }
      a:hover{
        background-color: #1890ff;
      }
    }
  }
}

// 收起菜单样式
:global{
  .ant-menu-submenu-placement-rightTop{
    .ant-menu-vertical{
      padding: 10px 0px;
      .ant-menu-item{
        height: 30px;
        margin-bottom: 0px;
        line-height: 30px;
        // padding-left: 50px;
        a{
          height: 30px;
        }
      }
      // .ant-menu-submenu-title{
      //   padding-left: 50px;
      // }
    }
  }
}