//
// 模态框
// ============================================================

.modal-wrapper
    @extend .position-fixed
    @extend .top
    @extend .left
    @extend .display-none
    @extend .col-12
    @extend .color-gray
    @extend .opacity-0
    z-index: $modal-z-index
    height: 100%

    .modal-shade
        background: $modal-shade-background

    .modal-box
        @extend .position-absolute
        @extend .top-50
        @extend .left-50
        @extend .background-white
        @extend .col-10
        @extend .opacity-0
        +px(max-width, 500px)
        z-index: $modal-box-z-index

    .modal-title
        @extend .input-height
        @extend .text-align-center

    .modal-content
        @extend .padding-top-lg
        @extend .padding-right-md
        @extend .padding-bottom-lg
        @extend .padding-left-md

    .modal-button
        @extend .display-flex
        @extend .text-align-center
        @extend .border-top
        @extend .border-color
        >div
            @extend .flex
            @extend .input-height
            @extend .border-right
            @extend .cursor-pointer
            @extend .transition-1s
            &:hover, &.active
                @extend .background-f9
            &:last-of-type
                @extend .border-none

            &[data-modal-affirm]
                @extend .color