/* Spark Chips - Unified Chip Design System */
/* Soft, pill-shaped chips with pastel colors for risk levels and tags */

/* Base chip styling */
.spark-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-chip);
    padding: 4px 10px;
    font-size: 0.82rem;
    line-height: 1;
    font-weight: 400;
    border: 1px solid var(--chip-border);
    background-color: var(--chip-background);
    color: var(--chip-text);
    gap: 6px;
    white-space: nowrap;
    transition: background-color var(--trans-fast), border-color var(--trans-fast), box-shadow var(--trans-fast);
}

/* Clickable chip variant */
.spark-chip--clickable {
    cursor: pointer;
}

.spark-chip--clickable:hover {
    background-color: var(--chip-background-hover);
    border-color: var(--chip-border-hover);
    box-shadow: var(--hover-shadow);
}

.spark-chip--clickable:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* Risk severity variants - using pastel colors */

/* Low/Success severity - soft green */
.spark-chip--risk-low {
    background-color: var(--chip-risk-low-bg);
    border-color: var(--chip-risk-low-border);
    color: var(--chip-risk-low-text);
}

/* Medium/Warning severity - soft amber/orange */
.spark-chip--risk-medium {
    background-color: var(--chip-risk-medium-bg);
    border-color: var(--chip-risk-medium-border);
    color: var(--chip-risk-medium-text);
}

/* High severity - soft red */
.spark-chip--risk-high {
    background-color: var(--chip-risk-high-bg);
    border-color: var(--chip-risk-high-border);
    color: var(--chip-risk-high-text);
}

/* Critical severity - stronger red */
.spark-chip--risk-critical {
    background-color: var(--chip-risk-critical-bg);
    border-color: var(--chip-risk-critical-border);
    color: var(--chip-risk-critical-text);
}

/* Unknown/Default severity - neutral gray */
.spark-chip--risk-unknown {
    background-color: var(--chip-risk-unknown-bg);
    border-color: var(--chip-risk-unknown-border);
    color: var(--chip-risk-unknown-text);
}

/* Chip group container for consistent spacing */
.spark-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

/* Dark mode adjustments */
[data-theme="dark"] .spark-chip {
    border-color: var(--chip-border-dark);
    background-color: var(--chip-background-dark);
    color: var(--chip-text-dark);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .spark-chip {
        transition: none !important;
    }
    
    .spark-chip--clickable:hover,
    .spark-chip--clickable:active {
        transform: none !important;
    }
}