/* Alerts CSS - Alert/Notice component styles */

/* ============================================
   Base Alert
   ============================================ */
.alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius);
    font-size: var(--text-sm);
}

.alert-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
}

.alert-content {
    flex: 1;
    min-width: 0;
}

.alert-title {
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.25rem;
}

.alert-description {
    line-height: 1.5;
    color: inherit;
    opacity: 0.9;
}

.alert-description p {
    margin: 0;
}

.alert-description p + p {
    margin-top: var(--spacing-sm);
}

/* ============================================
   Alert Variants
   ============================================ */

/* Default / Muted */
.alert-default,
.alert-muted {
    background-color: hsl(var(--muted));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
}

/* Primary */
.alert-primary {
    background-color: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
    border: 1px solid hsl(var(--primary) / 0.2);
}

/* Secondary */
.alert-secondary {
    background-color: hsl(var(--secondary) / 0.1);
    color: hsl(var(--secondary));
    border: 1px solid hsl(var(--secondary) / 0.2);
}

/* Success */
.alert-success {
    background-color: hsl(var(--success) / 0.1);
    color: hsl(var(--success));
    border: 1px solid hsl(var(--success) / 0.2);
}

/* Warning */
.alert-warning {
    background-color: hsl(var(--warning) / 0.1);
    color: hsl(var(--warning));
    border: 1px solid hsl(var(--warning) / 0.2);
}

/* Error / Destructive */
.alert-error,
.alert-destructive {
    background-color: hsl(var(--destructive) / 0.1);
    color: hsl(var(--destructive));
    border: 1px solid hsl(var(--destructive) / 0.2);
}

/* Info */
.alert-info {
    background-color: hsl(var(--info) / 0.1);
    color: hsl(var(--info));
    border: 1px solid hsl(var(--info) / 0.2);
}

/* ============================================
   Solid Variants (filled background)
   ============================================ */
.alert-primary-solid {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: none;
}

.alert-success-solid {
    background-color: hsl(var(--success));
    color: hsl(var(--success-foreground));
    border: none;
}

.alert-warning-solid {
    background-color: hsl(var(--warning));
    color: hsl(var(--warning-foreground));
    border: none;
}

.alert-error-solid,
.alert-destructive-solid {
    background-color: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    border: none;
}

.alert-info-solid {
    background-color: hsl(var(--info));
    color: hsl(var(--info-foreground));
    border: none;
}

/* ============================================
   Alert with Actions
   ============================================ */
.alert-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* ============================================
   Dismissible Alert
   ============================================ */
.alert-dismissible {
    padding-right: 3rem;
}

.alert-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background-color: transparent;
    color: currentColor;
    opacity: 0.7;
    cursor: pointer;
    border-radius: calc(var(--radius) - 2px);
    transition: all var(--transition-fast) ease-in-out;
}

.alert-close:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.1);
}

.alert-close svg,
.alert-close .icon {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   Alert with Left Border
   ============================================ */
.alert-border-left {
    border-left-width: 4px;
    border-radius: 0 var(--radius) var(--radius) 0;
}

.alert-border-left.alert-primary {
    border-left-color: hsl(var(--primary));
}

.alert-border-left.alert-success {
    border-left-color: hsl(var(--success));
}

.alert-border-left.alert-warning {
    border-left-color: hsl(var(--warning));
}

.alert-border-left.alert-error,
.alert-border-left.alert-destructive {
    border-left-color: hsl(var(--destructive));
}

.alert-border-left.alert-info {
    border-left-color: hsl(var(--info));
}

/* ============================================
   Inline Alert (compact)
   ============================================ */
.alert-inline {
    display: inline-flex;
    padding: var(--spacing-sm) var(--spacing-md);
}

.alert-inline .alert-icon {
    width: 1rem;
    height: 1rem;
    margin-top: 0;
}

.alert-inline .alert-title {
    margin-bottom: 0;
}

/* ============================================
   Alert Banner (full width)
   ============================================ */
.alert-banner {
    border-radius: 0;
    border-left: none;
    border-right: none;
}

/* ============================================
   Toast/Notification Style Alert
   ============================================ */
.alert-toast {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: none;
}

/* ============================================
   Alert List (for form errors, etc.)
   ============================================ */
.alert-list {
    margin: var(--spacing-sm) 0 0 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.alert-list li {
    margin-bottom: 0.25rem;
}

.alert-list li:last-child {
    margin-bottom: 0;
}

/* ============================================
   Callout (documentation style)
   ============================================ */
.callout {
    padding: var(--spacing-md);
    background-color: hsl(var(--muted) / 0.5);
    border-left: 4px solid hsl(var(--border));
    border-radius: 0 var(--radius) var(--radius) 0;
}

.callout-title {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.callout-content {
    font-size: var(--text-sm);
    color: hsl(var(--muted-foreground));
}

.callout-primary {
    border-left-color: hsl(var(--primary));
    background-color: hsl(var(--primary) / 0.05);
}

.callout-warning {
    border-left-color: hsl(var(--warning));
    background-color: hsl(var(--warning) / 0.05);
}

.callout-info {
    border-left-color: hsl(var(--info));
    background-color: hsl(var(--info) / 0.05);
}