.cs-alert {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid var(--cs-border);
    background: var(--cs-surface);
    box-shadow:
        0 10px 15px -3px color-mix(in srgb, var(--cs-text) 8%, transparent),
        0 4px 6px -4px color-mix(in srgb, var(--cs-text) 8%, transparent);
}

.cs-alert-icon-wrap {
    width: 3rem;
    min-width: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.cs-alert-icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.cs-alert-content {
    padding: 0.6rem 0.95rem;
    min-width: 0;
}

.cs-alert-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
}

.cs-alert-message {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    color: var(--cs-text);
    white-space: normal;
    overflow-wrap: anywhere;
}

.cs-alert-success .cs-alert-icon-wrap { background: #10b981; }
.cs-alert-success .cs-alert-title { color: #10b981; }

.cs-alert-info .cs-alert-icon-wrap { background: #3b82f6; }
.cs-alert-info .cs-alert-title { color: #3b82f6; }

.cs-alert-warning .cs-alert-icon-wrap { background: #f59e0b; }
.cs-alert-warning .cs-alert-title { color: #f59e0b; }

.cs-alert-error .cs-alert-icon-wrap { background: #ef4444; }
.cs-alert-error .cs-alert-title { color: #ef4444; }