@import '../../../styles/theme/index.less';
@import '../../../styles/antd/button.less';

@mi-modal: ~'@{mi-prefix}modal';
@ant-modal: ant-modal;

.@{mi-modal} {
    &-wrap,
    &-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: @mi-z-index-modal;
        transition: all @mi-anim-duration ease;
    }

    &-mask {
        background: fade(@mi-black, 50%);
        z-index: @mi-z-index-top;
    }

    &-wrap {
        .flex();
        .properties(perspective, 1200);

        &.top {
            align-items: flex-start;
        }

        &.bottom {
            align-items: flex-end
        }

        &.left {
            justify-content: flex-start;
        }

        &.right {
            justify-content: flex-end;
        }
    }

    &-content {
        .properties(width, 520);
        max-width: 92%;
        max-height: 92%;
        .linear-gradient-background();
        color: @mi-black;
        .border-radius();
        border: 1px solid var(--mi-theme, @mi-theme);
        transition: all @mi-anim-duration ease;
        position: relative;
        overflow-x: hidden;
        overflow-y: auto;
    }

    &-header {
        .flex(center, flex-start);
        color: var(--mi-font, @mi-font);
        .properties(padding-left, 24);
        .properties(padding-right, 24);
        .properties(padding-top, 16);
        .properties(padding-bottom, 16);
        border-bottom: 1px solid var(--mi-night, @mi-night);
        .letter-spacing();
    }

    &-body {
        .properties(font-size, 14);
        color: var(--mi-content-text, @mi-content-text);
        border-bottom: 1px solid var(--mi-night, @mi-night);
        .letter-spacing();
        .border-radius();
        .properties(padding, 24);
    }

    &-footer {
        .flex(center, flex-end);
        .properties(padding, 16);
        color: var(--mi-font, @mi-font);
        .letter-spacing();

        button {
            .properties(margin-right);

            &:last-child {
                margin-right: 0;
            }

            &.@{mi-modal}-btn {
                color: var(--mi-modal-btn-text, @mi-modal-btn-text);
                border-color: var(--mi-modal-btn-border, @mi-modal-btn-border);

                &:active,
                &:hover,
                &:focus {
                    color: var(--mi-modal-btn-text, @mi-modal-btn-text);
                    border-color: var(--mi-modal-btn-border, @mi-modal-btn-border);
                }
            }

            &.@{mi-modal}-btn-primary {
                background-color: var(--mi-theme, @mi-theme);
                border-color: var(--mi-theme, @mi-theme);
                text-shadow: none;
                color: var(--mi-modal-btn-text, @mi-modal-btn-text);
            }
        }

        &&-btn-center {
            justify-content: center;
        }

        &&-btn-left {
            justify-content: flex-start;
        }
    }

    &-close {
        background: transparent;
        cursor: pointer;
        outline: none;
        border: none;
        position: absolute;
        right: 0;
        top: 0;
        text-decoration: none;
        color: var(--mi-font, @mi-font);

        &-x {
            .flex();
            .properties(width, 50);
            .properties(height, 50);
            .properties(font-size, 16);
        }
    }

    &-error,
    &-success,
    &-confirm,
    &-warning,
    &-warn,
    &-info {
        .@{ant-modal} {
            &-content {
                .border-radius(6);
                .linear-gradient-background();
                border: 1px solid var(--mi-theme, @mi-theme);
                box-shadow: 0 0 10px var(--mi-modal-shadow, @mi-modal-shadow);
            }

            &-confirm {
                &-content {
                    color: var(--mi-font, @mi-font);
                }
            }
        }
        &.@{ant-modal} {
            &-success {
                .@{ant-modal} {
                    &-confirm-body {
                        > .anticon {
                            color: var(--mi-theme, @mi-theme);
                        }
                    }
                }
            }
        }
    }
}

.@{ant-modal} {
    &-mask {
        background: fade(@mi-black, 50%);
        z-index: @mi-z-index-top;
    }

    &-wrap {
        z-index: @mi-z-index-modal;
    }
}