//
// 消息提示框
// ============================================================

.message-wrapper
    @extend .position-fixed
    @extend .top
    @extend .left
    @extend .display-none
    @extend .col-12
    @extend .padding-top-lg
    @extend .padding-right-md
    @extend .padding-bottom-lg
    @extend .padding-left-md
    @extend .color-gray
    @extend .background-white
    @extend .animation-timing-function-fill-mode
    @extend .opacity-0
    transform: translateY(-100%)
    &:last-of-type
        +px(box-shadow, 1px, 1px, 5px, rgba(0, 0, 0, .1))

    &.active
        @extend .align-items-center
        animation: 1s messageShow
        @keyframes messageShow
            0%
                opacity: 0
                transform: translateY(-100%)
            100%
                opacity: 1
                transform: translateY(0)

    &.unactive
        animation: 1s messageHide
        @keyframes messageHide
            0%
                opacity: 1
                transform: translateY(0)
            100%
                opacity: 0
                transform: translateY(-100%)

    @media #{$media-min-lg}
        top: 10%
        left: 50%
        width: 500px
        margin-left: -250px

    .iconfont
        @extend .font-size-md
        @extend .margin-right-md