/*
* created by zhongzheng at 2019.12.23
*/
@import "../style/themes/default.less";
@import "../style/mixins/index.less";

@modal-prefix-cls: ~"@{sino-prefix}-modal";

.@{modal-prefix-cls} {
    position: fixed;
    top: 45%;
    left: 50%;
    width: @modal-width;
    overflow: hidden;
    background-color: @modal-background-color;
    border-radius: @modal-border-radius;
    transform: translate3d(-50%, -50%, 0);
    backface-visibility: hidden;
    transition: @modal-transition;
    transition-property: transform, opacity;

    &-header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: @modal-header-padding;
        font-size: @modal-header-font-size;
        font-weight: @modal-header-font-weight;
        line-height: @modal-header-line-height;
        text-align: center;

        &-content {
            padding: @modal-header-isolated-padding;

            & + .@{modal-prefix-cls}-content {
                padding-top: 0;
            }
        }
    }

    &-content {
        padding: @modal-content-padding;
    }

    &-message {
        max-height: @modal-message-max-height;
        font-size: @modal-message-font-size;
        line-height: @modal-message-line-height;
        white-space: pre-wrap;
        text-align: center;
        word-wrap: break-word;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        &-left {
            text-align: left;
        }

        &-right {
            text-align: right;
        }
    }

    &-footer {
        .bt1px();
        height: .92rem;
        overflow: hidden;
        user-select: none;

        .sn-button {
            width: 100% !important;
            height: .92rem;
        }

        &-button-group {
            display: flex;

            .sn-button {
                flex: 1;
                box-shadow: none;

                &:after {
                    display: none;
                }
            }
        }

        &-cancel.sn-button {
            color: @modal-cancel-button-text-color;
        }

        &-confirm.sn-button {
            box-shadow: none;

            &,
            &:active {
                color: @modal-confirm-button-text-color;
            }

            &:after {
                display: none;
            }
        }

        &-cancel+&-confirm {
            .bl1px();
        }
    }

    &-bounce-enter {
        transform: translate3d(-50%, -50%, 0) scale(0.75);
        opacity: 0;
    }

    &-bounce-leave-active {
        transform: translate3d(-50%, -50%, 0) scale(.9);
        opacity: 0;
    }
}
