.alert {
    gap: var(--spacing-xs);
    display: flex;
    border-radius: 4px;
    padding: var(--spacing-s);
    flex-wrap: unset;
    align-items: center;
}

.close-alert {
    cursor: pointer;
}

.alert-success {
    border: 1px solid var(--success-300);
    background-color: var(--success-200);
    color: var(--success-900);
}

.alert-success .close-alert svg:hover {
    fill: var(--success-950);
}

.alert-warning {
    border: 1px solid var(--warning-300);
    background-color: var(--warning-200);
    color: var(--warning-900);
}

.alert-warning .close-alert svg:hover {
    fill: var(--warning-950);
}

.alert-danger {
    border: 1px solid var(--danger-400);
    background-color: var(--danger-200);
    color: var(--danger-900);
}

.alert-danger .close-alert svg:hover {
    fill: var(--danger-950);
}

.alert-info {
    border: 1px solid var(--info-300);
    background-color: var(--info-200);
    color: var(--info-900);
}

.alert-info .close-alert svg:hover {
    fill: var(--info-950);
}