.alert {
    --alert-color: var(--text);
    --alert-background: var(--soft);
    --alert-border: var(--border);
    width: 100%;
    display: flex;
    align-items: flex-start;
    color: var(--alert-color);
    background: var(--alert-background);
    border: 1px solid var(--alert-border);
    font-family: inherit;
}

.alert--default {
    --alert-color: var(--text);
    --alert-background: var(--soft);
    --alert-border: var(--border);
}

.alert--info {
    --alert-color: #9ec9ff;
    --alert-background: rgba(59, 130, 246, .09);
    --alert-border: rgba(59, 130, 246, .2);
}

.alert--success {
    --alert-color: var(--success);
    --alert-background: rgba(67, 233, 134, .1);
    --alert-border: rgba(67, 233, 134, .25);
}

.alert--warning {
    --alert-color: #e9c978;
    --alert-background: rgba(245, 158, 11, .06);
    --alert-border: rgba(245, 158, 11, .14);
}

.alert--danger {
    --alert-color: #ffb1b1;
    --alert-background: rgba(239, 68, 68, .09);
    --alert-border: rgba(239, 68, 68, .22);
}

.alert--xs {
    padding: var(--space-5) var(--space-7);
    gap: var(--space-5);
    border-radius: var(--radius-compact);
    font-size: var(--font-xs);
}

.alert--sm {
    padding: var(--space-7) var(--space-9);
    gap: var(--space-scale-8);
    border-radius: var(--radius-9);
    font-size: var(--font-xs);
    line-height: 1.8;
}

.alert--md {
    padding: var(--space-scale-12) var(--space-12);
    gap: var(--space-7);
    border-radius: var(--radius-surface);
    font-size: var(--font-base);
}

.alert__icon {
    flex: 0 0 auto;
    line-height: 1;
}

.alert__content,
.alert__message {
    min-width: 0;
}

.alert__content {
    flex: 1;
    display: grid;
    gap: var(--space-3);
}

.alert__title {
    display: block;
    color: currentColor;
    font-size: inherit;
}

.alert__message > :first-child {
    margin-block-start: 0;
}

.alert__message > :last-child {
    margin-block-end: 0;
}

.alert__message ul {
    margin-block: 0;
    padding-inline-start: var(--space-12);
}

.alert__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}