@import '../../../assets/css/global.scss';
@import './var.scss';
@import './mixins.scss';

/* 重置 NavMenu */
.index-layout-leftmenu {
    background-color: $menu-dark-bg;
    border: none;


    .el-sub-menu .el-menu {
        background-color: $menu-dark-submenu-bg;
    }
    
    .el-sub-menu__title,
    .el-menu-item {
        height: 40px;
        line-height: 40px;
        color: $menu-dark-color;
        .icon {
            margin-right: 5px;
            vertical-align: middle;
            width: 24px;
            text-align: center;
            color: $menu-dark-color;
        }

        &:focus,
        &:hover {
            color: $menu-dark-highlight-color !important;
            background:none;
            .icon {
                color: $menu-dark-highlight-color !important;
            }
        } 
    }

    .is-active>.el-sub-menu__title {
        color: $menu-dark-highlight-color !important;
        .icon {
            color: $menu-dark-highlight-color !important;
        }
    }
    .el-sub-menu .el-menu-item.is-active,
    .el-menu-item.is-active{
        color: $menu-dark-highlight-color !important;
        background-color:  var(--el-color-primary) !important;
    }
    .el-sub-menu__title {
        margin-top: 4px;
        margin-bottom: 4px;
    }
    .el-menu-item:not(:last-child) {
        margin-bottom: 8px;
    }


    /* 收起 */
    &.el-menu--collapse {
        width: $menu-collapsed-width;
        .el-sub-menu__title,
        .el-menu-item {
            .icon {
                position: absolute;
                left: 15px;
                top: 10px;
                margin: 0;
            }         
        }
    }


}
.index-layout-leftmenu-popper {

    .el-menu {
        background-color: $menu-dark-submenu-bg;
    }
    .el-sub-menu__title,
    .el-menu-item {
        height: 40px;
        line-height: 40px;
        color: $menu-dark-color;
        .icon {
            margin-right: 5px;
            vertical-align: middle;
            width: 24px;
            text-align: center;
            color: $menu-dark-color;
        }

        &:focus,
        &:hover {
            color: $menu-dark-highlight-color !important;
            background:none;
            .icon {
                color: $menu-dark-highlight-color !important;
            }
        }        
    }

    .is-active>.el-sub-menu__title {
        color: $menu-dark-highlight-color !important;
        .icon {
            color: $menu-dark-highlight-color !important;
        }
    }
    .el-sub-menu .el-menu-item.is-active,
    .el-menu-item.is-active{
        color: $menu-dark-highlight-color !important;
        background-color:  var(--el-color-primary) !important;
    }
    .el-sub-menu__title {
        margin-top: 4px;
        margin-bottom: 4px;
    }
    .el-menu-item:not(:last-child) {
        margin-bottom: 8px;
    }


}

#indexlayout {
    display: flex;
    height: 100vh;
    overflow: hidden;

    #indexlayout-left {
        display: flex;
        flex-direction: column;
        width: $leftSideBarWidth;
        height: 100vh;
        background-color: $menu-dark-bg;
        color: #c0c4cc;
        transition-duration: 0.1s;
        z-index: 10;
        
        .indexlayout-left-logo {
          width: 100%;
          height: $headerHeight;
          line-height: $headerHeight;
          text-align: center;
          vertical-align: middle;
          .logo-url {
            display: inline-block;
            width: 100%;
            height: 100%;
            overflow: hidden;
            .logo-title {
              display: inline-block;
              margin: 0;
              font-size: 16px;
              font-family: Roboto, sans-serif;
              color: #c0c4cc;
            }
          }
          img {
            vertical-align: middle;
          }
        }
      
      
        .indexlayout-left-menu {
          flex: 1;
          overflow: hidden auto;
          // height: calc(100vh);
      
          .left-scrollbar {
            width: 100%;
            height: 100%;
          }
        }
      
        &.narrow {
          width: $menu-collapsed-width;
        }
      
        @include scrollbar;
      
    }

    #indexlayout-right {
        position: relative;
        flex: 1;
        overflow: auto;
        background-color: $mainBgColor;

        #indexlayout-right-top {
            width: 100%;
            height: ($headerHeight + $headerBreadcrumbHeight + $headerTabNavHeight);
            box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
            z-index: 9;
            .indexlayout-right-top-top {
              display: flex;
              width: 100%;
              height: $headerHeight;
              background-color: $menu-dark-bg;
              color: #c0c4cc;
              .indexlayout-flexible {
                width: $headerHeight;
                height: $headerHeight;
                line-height: $headerHeight;
                text-align: center;
                cursor: pointer;
                &:hover {
                  background-color: $menu-dark-submenu-bg;
                  color: $menu-dark-highlight-color;
                }
              }
          
              .indexlayout-top-menu {
                height: $headerHeight;
                line-height: $headerHeight;
                flex: 1;
                /* display: flex; */
                overflow: hidden;
                overflow-x: auto;
                .indexlayout-top-menu-li {
                  display: inline-block;
                  padding: 0 15px;
                  height: ($headerHeight - 3);
                  text-decoration: none;
                  color: #c0c4cc;
                  font-size: 15px;
                  border-bottom: solid 3px transparent;
                  &:hover,
                  &.active {
                    background-color: $menu-dark-submenu-bg;
                    color: $menu-dark-highlight-color;
                    border-bottom-color:  var(--el-color-primary);
                  }
                }
          
                .breadcrumb {
                  line-height: $headerHeight;
                }
              }
          
              .indexlayout-top-menu-right {
                width: 150px;

                .indexlayout-top-message {
                    height: $headerHeight;
                    line-height: $headerHeight;
                    /* display: inline-block; */
                    display: inline;
                    color: #c0c4cc;
                    .indexlayout-top-message-badge {
                        margin-left: -5px;
                        margin-top: -20px;
                        ::v-deep(.el-badge__content) {
                            border: 0;
                        }
                    }
                }

                .indexlayout-top-usermenu {
                  padding-left: 10px;
                  color: #c0c4cc;
                  line-height: $headerHeight;
                }
                .indexlayout-top-selectlang {
                  padding-left: 10px;
                  line-height: $headerHeight;
                  .dropDown {
                    i,
                    .svg-icon {
                      font-size: 16px;
                      color: #c0c4cc;
                    }
                  }
                }
              }
          
              @include scrollbar;
          
            }
            .indexlayout-right-top-bot {
              display: flex;
              width: 100%;
              height: $headerBreadcrumbHeight;
              background-color: $mainBgColor;
              .indexlayout-right-top-bot-home {
                width: $headerBreadcrumbHeight;
                height: $headerBreadcrumbHeight;
                line-height: $headerBreadcrumbHeight;
                text-align: center;
              }
              .breadcrumb {
                line-height: $headerBreadcrumbHeight;
                margin-left: 10px;
              }
            }


            .indexlayout-top-tab-nav {
                height: ($headerTabNavHeight - 4px);
                padding-top: 4px;
                /* background-color: #f0f0f0; */
                box-shadow: 0 -1px 4px rgba(0, 21, 41, 0.08);
                display: flex;
                align-items:center;
                .left,
                .right,
                .down {
                    width: ($headerTabNavHeight - 10px);
                    height: ($headerTabNavHeight - 8px);
                    line-height: ($headerTabNavHeight - 8px);
                   /*  background-color: #FFFFFF; */
                    text-align: center;
                    font-size: 12px;
                    cursor: pointer;  
                    .icon-box {
                        display: block;
                        width: ($headerTabNavHeight - 10px);
                        height: ($headerTabNavHeight - 8px);
                        line-height: ($headerTabNavHeight - 8px);
                    }      
                    .icon {
                        color: rgba(0,0,0,.45);
                    }
                    &:hover {
                        .icon {
                            color: rgba(0,0,0,.75);
                        }
                    }
                }
                 .down {
                    padding-right: 10px;
                    line-height: normal;
                } 
                .middle {
                    flex: 1;
                    overflow: hidden;
                    .tab {
                        position: relative;           
                        float: left;
                        list-style: none;
                        overflow: visible;
                        white-space: nowrap;
                        transition: transform .5s ease-in-out;
                        .item {
                            height: ($headerTabNavHeight - 6px);
                            line-height: ($headerTabNavHeight - 6px);
                            background: #fafafa;
                            box-sizing: border-box;
                            white-space: nowrap;
                            display: inline-block;
                            padding: 0 10px;
                            border-radius: 4px 4px 0 0;
                            transition: all .3s cubic-bezier(.645,.045,.355,1);
                            cursor: pointer;
                            font-size: 14px;
                            color: rgba(0,0,0,.65);
                            border: 1px solid  $mainBgColor;
                            &+.item {
                                margin-left: 3px;
                            }
                            &:hover {
                                color:  var(--el-color-primary);
                            }
                            .icon {
                                font-size: 10px;
                                margin: 0 0 2px 5px;
                                color: rgba(0,0,0,.45);
                                &:hover {
                                    color: rgba(0,0,0,.75);
                                }
            
                            }
                            .icon-pre {
                                display: none;
                                font-size: 12px;
                                margin: 0 5px 0 0;
                                color: rgba( var(--el-color-primary), 0.75);
                                &:hover {
                                    color: rgba( var(--el-color-primary), 1);
                                }
                            }
                        }            
                        .active {
                            color:  var(--el-color-primary);
                            background:#FFFFFF;
                            border-color:#FFFFFF;
                            .icon-pre { 
                                display: inline-block;
                            }
                        }
                    }
                }
            
            }


            &.tabNavEnable {
              height: ($headerHeight + $headerBreadcrumbHeight);
            }
            &.topNavEnable {
              height: ($headerHeight + $headerTabNavHeight);
              .indexlayout-right-top-top {
                background-color: #ffffff;
                color: $--color-text-primary;
                .indexlayout-flexible {
                  &:hover {
                    background-color: $mainBgColor;
                    color: $heading-color;
                  }
                }
                .indexlayout-top-menu-right {
                  .indexlayout-top-message {
                    color: $heading-color;
                  }
                  .indexlayout-top-usermenu {
                    color: $heading-color;
                  }
                  .indexlayout-top-selectlang {
                    .dropDown {
                      i,
                      .svg-icon {
                        color: $heading-color;
                      }
                    }
                  }
                }
              }
          
              &.tabNavEnable {
                height: ($headerHeight);
              }
          
              
            }
        }


        .indexlayout-right-main {

            .indexlayout-main-conent {
                margin: 24px;
                position: relative;
            }

        }



        &.fiexd-header {
            display: flex;
            flex-direction: column;
            .indexlayout-right-main {
                flex: 1;
                overflow: auto;
            }
        }
    }


}