/* unified_frontend/css/components/icon.css */

/* === BASE ICON STYLES === */
.icon {
    display: inline-block;
    vertical-align: middle;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    /* No fill here, let paths control it */
    transition: all 0.2s ease;
}

/* Ensure SVG takes full container size */
.icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* === DUOTONE STYLING (THE KEY PART) === */
.icon .primary {
    fill: var(--icon-primary);
    stroke: var(--text-light);
}

.icon .secondary {
    fill: var(--icon-secondary);
    stroke: var(--text-light);
}

/* === ICON SIZE VARIANTS === */
.icon--xs {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
}

.icon--sm {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
}

.icon--md {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
}

.icon--lg {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
}

.icon--xl {
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
}

/* === ICON COLOR THEMES === */
.icon--primary {
    color: var(--primary-color);
}

.icon--secondary {
    color: var(--text-secondary);
}

.icon--success {
    color: var(--success-color);
}

.icon--error {
    color: var(--error-color);
}

.icon--warning {
    color: var(--warning-color);
}

/* === INTERACTIVE STATES === */
.icon--interactive {
    cursor: pointer;
}

.icon--interactive:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

.icon--interactive:active {
    transform: scale(0.95);
}

/* === ACCESSIBILITY === */
.icon[aria-hidden="true"] {
    /* Decorative icons should not be focusable */
    pointer-events: none;
}

.icon:not([aria-hidden]) {
    /* Functional icons should be focusable */
    outline: none;
}

.icon:not([aria-hidden]):focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}