@import "./base/var";
@import "./mixins/index.scss";


@include c(drawer) {
    box-sizing: border-box;
    position: fixed;
    width: auto;

    @include e(right) {
        height: 100%;
        top: 0;
        right: 0;
    }
    @include e(left) {
        height: 100%;
        top: 0;
        left: 0;
    }
    @include e(top) {
        top: 0;
    }
    @include e(bottom) {
        bottom: 0;
    }

    @include e(cover) {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        overflow: hidden;
        width: 100%;
        height: 100%;
        background: $--modal-cover-background-color;
        z-index: 2001;
    }

    @include e(wrap) {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        overflow: auto;
        z-index: 2001;
    }

    @include e(hidden) {
        display: none;
    }

    @include e(content) {
        width: 100%;
        height: 100%;
        background-color: $--color-white;
        border-radius: $--border-radius-default;
        box-shadow: $--box-shadow-default;

    }

    @include e(close) {
        position: absolute;
        z-index: 1;
        top: $--modal-vertical-padding;
        right: $--modal-horizontal-padding;
        cursor: pointer;
        color: $--color-text-icon;
        line-height: 1;
        font-size: 22px;
        &:hover {
            color: $--color-text-default;
        }
    }

    @include e(header) {
        box-sizing: border-box;
        text-align: left;
        font-weight: 600;
        padding: $--modal-vertical-padding $--modal-horizontal-padding;
        border-bottom: $--border-default;
        color: $--color-text-title;
        font-size: $--modal-header-font-size;
    }

    @include e(body) {
        box-sizing: border-box;
        text-align: left;

        @include e(body-content) {
            padding: $--modal-vertical-padding $--modal-horizontal-padding;
        }
    }

    @include e(footer) {
        box-sizing: border-box;
        text-align: right;
        padding: $--modal-vertical-padding $--modal-horizontal-padding;
        border-top: $--border-default;
        & > button:nth-last-child(1) {
            margin-left: 10px;
        }
    }
}
