@import url('meta');

.flash-message {
    @_top: 30px;
    @_width: 300px;
    >.notice {
        position: fixed;
        top: @_top;
        left: 50%;
        margin: 0 auto;
        margin-left: @_width * -0.5;
        width: @_width;
        display: block;
        background: @gray_c;
        border: 1px solid @gray_b;
        padding: 5px 10px;
        ._title {
            font-weight: bold;
            margin-bottom: 10px;
        }
        ._close {
            position: absolute;
            right: 5px;
            top: 5px;
            cursor: pointer;
        }
    }

    &-enter {
        transform: translate3d(0, @_width * -0.5, 0);
        opacity: 0.01;
    }

    &-enter&-enter-active {
        opacity: 1;
        transform: translate3d(0,0,0);
        transition: all .3s;
    }

    &-leave {
        opacity: 1;
        transform: translate3d(0,0,0);
    }

    &-leave&-leave-active {
        opacity: 0.01;
        transform: translate3d(0, @_width * -0.3,0);
        transition: all .3s;
    }

    >._center.notice {
        top: 45%;
    }
    &-enter._center {
        transform: scale(.5);
        opacity: 0.01;
    }

    &-enter&-enter-active._center {
        opacity: 1;
        transform: scale(1.02);
        transition: all .3s;
    }

    &-leave._center {
        opacity: 1;
        transform: scale(1);
    }

    &-leave&-leave-active._center {
        opacity: 0.01;
        transform: scale(.5);
        transition: all .3s;
    }

    >._bottom.notice {
        top: initial;
        bottom: @_top;
    }
    &-enter._bottom {
        transform: translate3d(0,@_width * 0.5,0);
        opacity: 0.01;
    }

    &-enter&-enter-active._bottom {
        opacity: 1;
        transform: translate3d(0,0,0);
        transition: all .3s;
    }

    &-leave._bottom {
        opacity: 1;
        transform: translate3d(0,0,0);
    }

    &-leave&-leave-active._bottom {
        opacity: 0.01;
        transform: translate3d(0, @_width * 0.3,0);
        transition: all .3s;
    }
}