@import '../../../styles/definitions/colors';

.alert {
    &_alertContainer {
        display: flex;
        align-items: center;
        border-radius: 3px;
        width: 100%;
        margin-bottom: 24px;
        padding: 9px 21px 11px 15px;

        &--global {
            margin: 0;
        }

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

    &_messageWrapper {
        display: flex;
        align-items: center;
        flex-grow: 1;
        color: $white;
        font-size: 16px;
        font-weight: bold;
    }

    &_closeIcon {
        cursor: pointer;
        flex-shrink: 0;
        margin-left: 10px;
        position: relative;
        border-radius: 100%;
        width: 24px;
        height: 24px;
        display: flex;
        justify-content: center;

        svg {
            fill: $white;
            width: 12px;
        }
        &:hover {
            background: rgba(0, 0, 0, .15);
        }
    }
}
