/*
 * ui-icons.css — the Icon primitive (COMPONENT_CATALOG.md § Icon).
 *
 * Pairs with ui-icons.js: `<span class="sc-icon" data-icon="music">` placeholders
 * (hydrated) and `singsClubUiIcons.render()` output share this styling.
 * Strokes inherit `currentColor`; the `.a` accent layer inside each SVG is
 * tinted with `--sc-icon-accent` (theme accent by default) so the whole set
 * re-colors with every theme. Semantic tokens only (.claude/rules/ui-tokens.md).
 */

:root {
    --sc-icon-size: 1.15em;
    --sc-icon-accent: var(--accent);
    --sc-icon-accent-opacity: 0.28;
}

.sc-icon {
    display: inline-block;
    width: var(--sc-icon-size);
    height: var(--sc-icon-size);
    vertical-align: -0.22em;
    flex: 0 0 auto;
    line-height: 0;
    color: inherit;
}

.sc-icon > svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Duotone accent layer (shapes tagged class="a" inside every icon). */
[data-icon] svg .a {
    fill: var(--sc-icon-accent);
    stroke: none;
    opacity: var(--sc-icon-accent-opacity);
}

/* Size steps (the default tracks the surrounding font-size, like the emoji did). */
.sc-icon-sm { --sc-icon-size: 1em; }
.sc-icon-lg { --sc-icon-size: 1.5em; }
.sc-icon-xl { --sc-icon-size: 2em; }

/* Semantic tones — the accent layer follows the tone colour. */
.sc-tone-success { color: var(--success); --sc-icon-accent: currentColor; }
.sc-tone-error { color: var(--error); --sc-icon-accent: currentColor; }
.sc-tone-warning { color: var(--warning); --sc-icon-accent: currentColor; }
.sc-tone-accent { color: var(--accent); --sc-icon-accent: currentColor; }
.sc-tone-muted { color: var(--text-light); --sc-icon-accent: currentColor; }

/* Leaderboard / rank medals — derived from tokens only. */
.sc-tone-gold { color: var(--warning); --sc-icon-accent: currentColor; }
.sc-tone-silver { color: var(--text-secondary); --sc-icon-accent: currentColor; }
.sc-tone-bronze { color: color-mix(in srgb, var(--warning) 55%, var(--error)); --sc-icon-accent: currentColor; }

/* On filled surfaces the theme accent would vanish into the background —
   let the accent layer borrow the surface's text colour instead. */
.btn-primary .sc-icon,
.btn-danger .sc-icon,
.btn-success .sc-icon,
.btn-stop .sc-icon,
.nav-item.active .sc-icon,
.nav-item.active [data-icon],
.main-tab.active .sc-icon {
    --sc-icon-accent: currentColor;
}

/* Sidebar logo tile (gradient background): white glyph, no theme-accent fill. */
.sidebar-logo .sc-icon {
    --sc-icon-size: 1em;
    --sc-icon-accent: currentColor;
}

/* Leading icon inside a control: flex/inline-flex buttons drop the whitespace text node
   that used to separate the emoji from its label, so give the icon its own gap.
   (`:only-child` cannot see text nodes, so icon-only controls opt out by class below.) */
button > .sc-icon:first-child,
.btn > .sc-icon:first-child,
.nav-item > .sc-icon:first-child {
    margin-inline-end: 0.35em;
}

/* Icon-only controls keep their hit area; the glyph fills the control's font box. */
.btn-icon > .sc-icon,
.party-overlay-icon-btn > .sc-icon,
.window-control-btn > .sc-icon,
.clear-search-btn > .sc-icon,
.track-history-btn > .sc-icon,
.party-popout-close-btn > .sc-icon,
.btn-logout > .sc-icon,
.performance-fullscreen-btn > .sc-icon {
    margin-inline-end: 0;
    vertical-align: middle;
}