/* Element: Alerts & Feedback */

.alert {
    padding: var(--s-4);
    border-radius: var(--r-xl);
    font-size: var(--fs-sm);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.alert-error {
    background: color-mix(in srgb, var(--c-bg), transparent 70%);
    border: 1px solid color-mix(in srgb, var(--c-error), transparent 80%);
    border-left: 4px solid var(--c-error);
    color: var(--c-error);
}

.alert-success {
    background: color-mix(in srgb, var(--c-bg), transparent 70%);
    border: 1px solid color-mix(in srgb, var(--c-success), transparent 80%);
    border-left: 4px solid var(--c-success);
    color: var(--c-success);
}

.alert-warning {
    background: color-mix(in srgb, var(--c-bg), transparent 70%);
    border: 1px solid color-mix(in srgb, var(--c-warning), transparent 80%);
    border-left: 4px solid var(--c-warning);
    color: var(--c-warning);
}

.alert-item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}