/* Copyright (C) 2016 NooBaa */

.alerts-pane {
    .column();
    .greedy();

    .pane-header {
        line-height: 3 * @gutter;
        background-color: rgb(var(--color03));
        border-bottom: 1px solid rgb(var(--color20));
    }

    .alert {
        border-bottom: 1px solid rgba(var(--color11), .3);
        border-left: 4px solid transparent;

        &.alert-crit {
            border-left-color: rgb(var(--color31));

            svg-icon {
                fill: rgb(var(--color31));
            }
        }


        &.alert-major {
            border-left-color: rgb(var(--color26));

            svg-icon {
                fill: rgb(var(--color26));
            }
        }

        &.alert-info {
            border-left-color: rgb(var(--color23));

            svg-icon {
                fill: rgb(var(--color23));
            }
        }

        .mark-as-read-btn {
            opacity: 0;
            transition: opacity 300ms ease-in-out;
            margin-left: @gutter/2;
        }

        .alert-loader {
            padding: @gutter/2 @gutter;
        }

        &:hover .mark-as-read-btn {
            opacity: 1
        };

        &.unread {
            background-color: rgb(var(--color06));

            &.crit {
                border-left-color: rgb(var(--color31));
            }

            &.major {
                border-left-color: rgb(var(--color26));
            }

            &.info   {
                border-left-color: rgb(var(--color23));
            }
        }
    }
}
