@import url('meta');
@import url('color');
@import url('glue');

.toast {
    @_width: @min_input_width * 1.25;
    position: fixed;
    width: 100%;
    z-index: 1000;
    left: 0;
    top: @padding * 2;
    >.notice {
        margin: @padding auto;
        text-align: center;
        display: block;
        ._wrap {
            .bordered;
            .box_shadow;
            text-align: left;
            position: relative;
            display: inline-block;
            padding: @padding * 0.4 @padding * 1.6;
            max-width: @_width;
            background: @white;
            &._showClose {
                padding-right: @padding * 3;
            }
            >._content {
                display: inline-block;
            }
            >@{NS}.icon {
                line-height: 22px;
                font-size: 18px;
                float: left;
                margin-right: @padding * .5;
                &.success {
                    color: @green;
                }
                &.info {
                    color: @blue;
                }
                &.warning {
                    color: @orange;
                }
                &.error {
                    color: @red;
                }
            }
            ._message {
                overflow: hidden;
            }
            ._close {
                font-size: 12px;
                cursor: pointer;
                position: absolute;
                right: 8px;
                top: 4px;
                >i {
                    font-size: 16px;
                }
            }
        }
    }

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

    &-enter&-enter-active {
        opacity: 1;
        transform: translate3d(0, @_width * 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;
    }
}