@import "./var";
.#{$prefix}drawer{
    position: fixed;
    top:50px;
    left:auto;
    right:0;
    bottom:0;
    width:$drawer-width-size-default;
    background-color:$drawer-color-bg;
    box-shadow:$drawer-box-shadow-s;
    display: flex;
    color:$color-text;
    // -webkit-transform: translate3d(100%,0,0);
    // -moz-transform: translate3d(100%,0,0);
    // -ms-transform: translate3d(100%,0,0);
    // -webkit-transition:transform .1s linear;
    flex-direction: column;
    
    //注释掉z-index是因为drawer上使用tooltips时，层级会被盖住。目前还没有左侧弹出的情况，隐藏先注释掉。
    //z-index: 1001;  //为了在左侧的时候，可以盖住左侧菜单的收起按钮
    z-index: 10; //加上10 ，为了抽屉能够覆盖页面普通层级，比如segment选中时的z-index:1;之所以是10，是因为组件规定，普通层级范围1-10
    &:after{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        background-color: $color-bg-second;
    }
}
.#{$prefix}drawer--left{
    top:50px;
    left:0;
    right:auto;
    bottom:0;
    // -webkit-transform: translate3d(-100%,0,0);
    // -moz-transform: translate3d(-100%,0,0);
    // -ms-transform: translate3d(-100%,0,0);
    flex-direction: column;
}
.#{$prefix}drawer.is-shown{
    // -webkit-transform: translate3d(0,0,0);
    // -moz-transform: translate3d(0,0,0);
    // -ms-transform: translate3d(0,0,0);
}
.#{$prefix}drawer.size-l{
    width:$drawer-width-size-l;
}

.#{$prefix}drawer__header{
    height: 50px;
    padding:10px 20px;
    border-bottom:1px solid $drawer-color-border;
    flex:0 0 50px;

    .#{$prefix}justify-grid__col .#{$prefix}h3 {
        line-height: 28px;
        /* 修复头部，且少右侧col--right 的时候，文字不居中的bug*/
    }
    .#{$prefix}justify-grid__col--right{
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}

.#{$prefix}drawer__body{
    flex:1 1 auto;
    overflow: auto;
    padding: $drawer-body-padding;
}
.#{$prefix}drawer__body-inner{
    // max-height: 100%;
}

.#{$prefix}drawer__footer{
    flex:0 0 50px;
    height: 50px;
    padding:10px 20px;
    border-top:1px solid $drawer-color-border;    
    background-color: $drawer-color-bg;
}