/* Copyright (C) 2016 NooBaa */

notification-box {
    @height: 50px + @gutter;

    ul {
        position: fixed;
        bottom: @gutter/2;
        left: @gutter/2;
        font-size: @font-size3;
        transform: translateY(120%);
        transition: all 500ms ease-out;
        z-index: 3;
        width: 400px;
        height: @height;
        overflow-y: hidden;
        border: 1px solid black;
        font-weight: @font-regular;
        background-color: rgba(var(--color32), .85);

        &:hover {
            background-color: rgba(var(--color32), 1);
        }

        &.visible {
            transform: translateY(0);
        }

        &.info-borders {
            border-color: rgba(var(--color23), .85);
        }

        &.success-borders {
            border-color: rgba(var(--color27), .85);
        }

        &.warning-borders {
            border-color: rgba(var(--color26), .85);
        }

        &.error-borders {
            border-color: rgba(var(--color31), .85);
        }

    }

    .notif {
        font-size: @font-size3;
        line-height: 1.2;
        height: @height;
        transition: margin 500ms linear;
        margin-top: -@height;;

        &:last-child {
            margin-top: 0;
        }
    }
}
