RocketChat/Rocket.Chat

@import '../../styles/colors';
@import '../../styles/helpers';
@import '../../styles/variables';

$alert-color: $color-text-lighter;
$alert-font-family: $font-family;
$alert-background-color: $bg-color-darker;
$alert-success-background-color: $color-green;
$alert-warning-background-color: $color-yellow;
$alert-error-background-color: $color-red;

.alert {
    display: flex;
    overflow: hidden;

    width: 100%;
    height: 28px;
    padding: 6px 16px;

    letter-spacing: 0;

    color: $alert-color;
    background-color: $alert-background-color;

    font-family: $alert-font-family;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    align-items: center;
    justify-content: space-between;

    &__content {
        overflow: hidden;

        white-space: nowrap;
        text-overflow: ellipsis;
    }

    &__close {
        display: flex;

        padding: 0;

        cursor: pointer;

        color: $alert-color;
        border: none;
        outline: none;
        background: none;

        @include pressable-button(1px);
    }

    &--success {
        background-color: $alert-success-background-color;
    }

    &--warning {
        background-color: $alert-warning-background-color;
    }

    &--error {
        background-color: $alert-error-background-color;
    }
}