/* Component: Alert
 * Description: Provides styles for alert messages with various severity levels 
 *              (e.g., success, warning, error) to enhance user feedback and visibility.
 */

 
.smd-component_alert--success {
    border-left-color: var(--color-branding-verified);
}

.smd-component_alert--warning {
    border-left-color: var(--color-branding-secondary);
}

.smd-component_alert--error {
    border-left-color: var(--color-branding-primary);
}

.smd-component_alert-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.smd-component_alert-content {
    flex: 1;
}

.smd-component_alert-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.smd-component_alert-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.smd-component_alert-close:hover {
    opacity: 1;
}