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


@include c(modal) {
    box-sizing: border-box;
    position: relative;
    margin: 0 auto;
    width: auto;

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

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

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

    @include e(overhidden) {
        height: 100%;
        overflow: hidden;
    }

    @include e(content) {
        width: 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;
        }
    }


    @include e(fullscreen) {
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        position: absolute;
        overflow: hidden;
        @include e(content, false) {
            height: 100%;
        }
    }
}

@include c(modal-confirm) {

    @include e(icon) {
        [class*='m-icon'] {
            font-size: $--modal-confirm-icon-font-size;
        }
        text-align: center;
    }
    @include m(info) {
        @include e(icon, false) {
            color: $--color-info;
        }
    }

    @include m(success) {
        @include e(icon, false) {
            color: $--color-success;
        }
    }

    @include m(warning) {
        @include e(icon, false) {
            color: $--color-warning;
        }
    }

    @include m(error) {
        @include e(icon, false) {
            color: $--color-danger;
        }
    }

    @include m(confirm) {
        @include e(icon, false) {
            color: $--color-warning;
        }
    }

    @include e(header) {

    }

    @include e(title) {
        font-size: $--modal-confirm-title-font-size;
        font-weight: 600;
        text-align: center;
        margin: 0 0 10px 0;
    }

    @include e(content) {
        text-align: center;
        font-size: $--modal-confirm-content-font-size;
    }

    @include e(footer) {
        margin-top: 20px;
        text-align: right;
        & > button:nth-last-child(1) {
            margin-left: 10px;
        }
    }

    @include m(left) {
        @include e(header, false) {
            text-align: left;
        }
        @include e(icon, false) {
            display: inline-block;
            text-align: left;
            vertical-align: middle;
        }
        @include e(title, false) {
            display: inline-block;
            text-align: left;
            vertical-align: middle;
            line-height: 60px;
            margin: 0 0 0 10px;
        }
        @include e(content, false) {
            text-align: left;
            padding-left: 50px;
        }
    }
}
