$drawer-prefix: #{$css-prefix}drawer;

.#{$drawer-prefix} {
    width: auto;
    height: 100%;
    position: absolute;
    top: 0;

    &-inner{
        position: absolute;
    }

    &-left{
        left: 0;
    }
    &-right{
        right: 0;
    }

    &-hidden {
        display: none !important;
    }

    &-wrap {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: $zindex-drawer;
        -webkit-overflow-scrolling: touch;
        outline: 0;

        &-inner{
            position: absolute;
            overflow: hidden;
        }

        &-dragging{
            user-select: none;
        }
    }

    &-wrap * {
        box-sizing: border-box;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    &-mask {
        @include mask($drawer-mask-bg);
        &-inner{
            position: absolute;
        }
    }

    &-content {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        background-color: $drawer-bg;
        border: 0;
        background-clip: padding-box;
        box-shadow: $drawer-shadow;

        &-no-mask{
            pointer-events: auto;
        }
        &-has-footer{
            .#{$drawer-prefix}-body{
                height:calc(100% - 105px)

            }
            
        }
    }

    &-header {
        border-bottom: $drawer-header-border;
        padding: $drawer-header-padding;
        line-height: 1;
        height:$drawer-header-height;
        p,
        &-inner
        {
            display: inline-block;
            width: 100%;
            height: 20px;
            line-height: 20px;
            font-size: $font-size-base;
            color: $title-color;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        p i, p span{
            vertical-align: middle;
        }
    }

    &-close {
        z-index: 1;
        @include content-close($drawer-close-icon-top, $drawer-close-icon-right,$drawer-close-icon-size);
    }

    &-body {
        width: 100%;
        height:calc(100% - 63px);
        padding: $drawer-body-padding;
        font-size: 12px;
        line-height: 1.5;
        word-wrap: break-word;
        position: absolute;
        overflow: auto;
    }

    &-footer{
        position: absolute;
        background: $drawer-footer-bg;
        z-index:1;
        bottom: 0;
        height: $drawer-footer-height;
        border-top: $drawer-footer-border;
        width: 100%;
        text-align: right;
        padding:$drawer-footer-padding;
    }

    &-no-header &-body{
        height: 100%;
    }

    &-no-mask{
        pointer-events: none;

        .#{drawer-prefix}-drag{
            pointer-events: auto;
        }
    }

    &-drag{
        top: 0;
        height: 100%;
        width: 0;
        position: absolute;
        &-left{
            right: 0;
        }
        &-move-trigger{
            width: 8px;
            height: 100px;
            line-height: 100px;
            position: absolute;
            top: 50%;
            background: rgb(243, 243, 243);
            transform: translate(-50%, -50%);
            border-radius:"4px";
            box-shadow: 0 0 1px 1px rgba(0, 0, 0, .2);
            cursor: col-resize;
            &-point{
                display: inline-block;
                width: 50%;
                transform: translateX(50%);
                i{
                    display: block;
                    border-bottom: 1px solid rgb(192, 192, 192);
                    padding-bottom: 2px;
                }
            }
        }
    }
}