/**
 * FontAwesome SVG Sprite CSS v3
 * Fixed: fill inheritance for <use> elements
 */

/* Base SVG icon styling - FILL MUST BE HERE for <use> to inherit */
.svg-inline--fa {
    display: inline-block;
    height: 1em;
    width: 1em;
    vertical-align: -0.125em;
    overflow: visible;
    fill: currentColor;  /* This is the key fix! */
}

/* Fixed width */
.svg-inline--fa.fa-fw {
    width: 1.25em;
    text-align: center;
}

/* Size modifiers */
.svg-inline--fa.fa-xs { font-size: 0.75em; }
.svg-inline--fa.fa-sm { font-size: 0.875em; }
.svg-inline--fa.fa-lg { font-size: 1.25em; vertical-align: -0.225em; }
.svg-inline--fa.fa-xl { font-size: 1.5em; vertical-align: -0.125em; }
.svg-inline--fa.fa-2xl { font-size: 2em; }
.svg-inline--fa.fa-1x { font-size: 1em; }
.svg-inline--fa.fa-2x { font-size: 2em; }
.svg-inline--fa.fa-3x { font-size: 3em; }
.svg-inline--fa.fa-4x { font-size: 4em; }
.svg-inline--fa.fa-5x { font-size: 5em; }
.svg-inline--fa.fa-6x { font-size: 6em; }
.svg-inline--fa.fa-7x { font-size: 7em; }
.svg-inline--fa.fa-8x { font-size: 8em; }
.svg-inline--fa.fa-9x { font-size: 9em; }
.svg-inline--fa.fa-10x { font-size: 10em; }

/* Animations */
.svg-inline--fa.fa-spin {
    animation: fa-spin 2s linear infinite;
}
.svg-inline--fa.fa-pulse {
    animation: fa-spin 1s steps(8) infinite;
}
@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Rotations */
.svg-inline--fa.fa-rotate-90 { transform: rotate(90deg); }
.svg-inline--fa.fa-rotate-180 { transform: rotate(180deg); }
.svg-inline--fa.fa-rotate-270 { transform: rotate(270deg); }
.svg-inline--fa.fa-flip-horizontal { transform: scaleX(-1); }
.svg-inline--fa.fa-flip-vertical { transform: scaleY(-1); }

/* Duotone support - CSS variables for two-color icons */
.svg-inline--fa .fa-primary {
    fill: var(--fa-primary-color, currentColor);
}
.svg-inline--fa .fa-secondary {
    fill: var(--fa-secondary-color, currentColor);
    opacity: var(--fa-secondary-opacity, 0.4);
}

/* When duotone icon has explicit colors set, override opacity */
.svg-inline--fa[style*="--fa-secondary-color"] .fa-secondary {
    opacity: var(--fa-secondary-opacity, 1);
}