/*
 * @Author: your name
 * @Date: 2019-10-30 21:57:01
 * @LastEditTime: 2019-10-31 13:48:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \BASE\node_modules\zfs-component\src\scss\zte-nav.scss
 */
 @import "common/var";

 .zte-nav {
   width: 100%;
   padding: 5px 0;
   height: 32px;
   box-sizing: content-box;
 
   // card模式特殊样式
   &.is-card {
     padding-bottom: 10px;
     padding-top: 10px;
     .tab-list {
       .list-complete-item {
         margin-right: 0;
         .el-badge {
           top: 50%;
           right: 5px;
           transform: translateY(-50%);
           width: 16px;
           height: 16px;
           .el-icon-close {
             // background-color: #000;
             color:rgba(81,86,102,0.5);
           }
         }
       }
       .el-button {
         // border-bottom-left-radius: 0;
         // border-bottom-right-radius: 0;
         box-shadow: none;
         border: 1px solid #dcdfe6;
         // border-bottom: 0;
         font-size: 12px;
       }
       .is-more {
         .el-button {
           margin: 0;
           padding: 9px 23px;
         }
       }
     }
   }
   .tab-list {
     width: calc(100% - 138px);
     display: inline-block;
     position: relative;
     margin-right: 10px;
 
     .el-button {
       box-shadow: 0 7px 9px 0 rgba(#00579a, .08);
       border: 0;
     }
 
     .is-more {
       position: absolute;
       top: 0;
       right: 0;
       .el-button {
         padding: 6px 23px;
         margin : 3px;
       }
     }
   }
   .list-complete-item {
     display: inline-block;
     position: relative;
     margin-right: 15px;
     transition: all .3s;
 
     .el-button {
       height: 32px;
       padding: 2px 30px;
     }
 
     .el-badge {
       position: absolute;
       // width: 16px;
       // height: 16px;
       top: -4px;
       right: 0;
       cursor: pointer;
 
       .el-icon-error {
         border-radius: 50%;
         background-color: #fff;
         color: $theme;
         color: var(--theme);
       }
     }
 
     &.is-active {
       .el-icon-error {
         background-color: $theme;
         background-color: var(--theme);
         color: #fff;
       }
     }
   }
   .list-complete-enter, .list-complete-leave-to
   /* .list-complete-leave-active for below version 2.1.8 */ {
     opacity: 0;
     transform: translateY(30px);
   }
   .list-complete-leave-active {
     position: absolute;
   }
 
   .quick-operate {
     display: flex;
     width: 100px;
     height: 28px;
     padding: 0 10px;
     background-color: #e9e9e9;
     color: #000;
     border-radius: 18px;
     float: right;
     box-shadow: 0 7px 9px rgba(#00679a, .04);
     justify-content: space-around;
     align-items: center;
 
     .icon {
       width: 20px;
       height: 20px;
       font-size: 20px;
       cursor: pointer;
     }
   }
 }
 .hidden-tabs-popup {
   // background-color: transparent;
   padding-right: 0 !important;
   .el-scrollbar__wrap {
     max-height: 500px;
     padding-right: 20px;
   }
   
   .list-complete-item {
     padding: 10px;
     display: flex;
     justify-content: space-between;
     cursor: pointer;
 
     &:hover {
       color: $theme;
       color: var(--theme);
     }
 
     &.active {
       color: $theme;
       color: var(--theme);
     }
   }
 }