@include keyframes(fadeIn) {
  from {
    @include transform(translate3d(0, -8px, 0));
    margin-top: -50px;
    opacity: 0;
  }
  to {
    @include transform(translate3d(0, 0px, 0));
    margin-top: 0px;
    opacity: 1;
  }
}

.lui-flash-message-container{
    @include transition(all 0.2s ease-out);
    width: 100%;
    z-index: 99999;
    background: $lui-navbar-background-color;

    &.lui-fixed {
        position: fixed;
    }

    .lui-flash-message {
        @include display(inline-flex);
        padding: 15px;
        line-height: 0.9;
        position: relative;
        width: 100% !important;

        .lui-flash-message-text {
            width: 100%;
            text-align: center;
            z-index: 10;
        }

        .lui-flash-message-close {
            position: relative;
            opacity: 0.5;
            margin-left: auto;
            pointer-events: all!important;
            z-index: 10;

            &:hover{
                opacity: 1;
                cursor: pointer
            }
        }

        .lui-flash-message-progress {
            // @include transition(width 2.0s ease-in 1s);
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
        }

        &.success{
            color: $success-inverse;
            background-color: $success;

            .lui-flash-message-progress {
                background-color: darken($success, 5%);
            }

            &:hover{

                &.lui-is-clickable{
                    background: lighten($success, 5%);
                    cursor: pointer;
                }

                .lui-flash-message-progress {
                    background-color: $success;
                }
            }
        }

        &.alert{
            color: $alert-inverse;
            background-color: $alert;

            .lui-flash-message-progress {
                background-color: darken($alert, 5%);
            }

            &:hover{

                &.lui-is-clickable{
                    background: lighten($alert, 5%);
                    cursor: pointer;
                }

                .lui-flash-message-progress {
                    background-color: $alert;
                }

            }
        }

        &.error{
            color: $error-inverse;
            background-color: $error;

            .lui-flash-message-progress {
                background-color: darken($error, 5%);
            }

            &:hover{

                &.lui-is-clickable{
                    background: lighten($error, 5%);
                    cursor: pointer;
                }

                .lui-flash-message-progress {
                    background-color: $error;
                }
            }
        }

        &.notice{
            color: $notice-inverse;
            background-color: $notice;

            .lui-flash-message-progress {
                background-color: darken($notice, 5%);
            }

            &:hover{
                &.lui-is-clickable{
                    background: lighten($notice, 5%);
                    cursor: pointer;
                }

                .lui-flash-message-progress {
                    background-color: $notice;
                }
            }
        }

        &.lui-is-animated{
            @include transform(translate3d(0, 0px, 0));
            margin-top: 0px;

            opacity:0;  /* make things invisible upon start */
            @include animation(fadeIn 0.2s ease-out);
            @include animation-fill-mode(forwards);

        }

    }
}