<div class="alertContainer @Type.ToLower()">
    @if (Title != null)
    {
        <div class="alertTitle">
            @Title
        </div>
    }
    @if (Message != null)
    {
        <div>
            @Message
        </div>
    }
</div>
<style>
    .alertContainer {
        border: 4px solid;
        border-radius: 4px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        justify-items: stretch;
        width: 100%;
    }


    .alertContainer.@SeverityType.Warning.ToLower() {
        background-color: var(--severity-warning-color);
        border-color: var(--severity-warning-border-color);
    }

    .alertContainer.@SeverityType.Error.ToLower() {
        background-color: var(--severity-error-color);
        border-color: var(--severity-error-border-color);
    }

    .alertContainer.@SeverityType.Information.ToLower() {
        background-color: var(--severity-information-color);
        border-color: var(--severity-information-border-color);
    }

    .alertContainer.@SeverityType.Success.ToLower() {
        background-color: var(--severity-success-color);
        border-color: var(--severity-success-border-color);
    }

    .alertTitle {
        font-weight: 800;
    }

</style>

@code {

    [Parameter]
    public RenderFragment? Title { get; set; }

    [Parameter]
    public RenderFragment? Message { get; set; }

    [Parameter]
    public string Type { get; set; } = SeverityType.Warning;

}