/* src/components/basic/XWUIIcon/XWUIIcon.css */
/**
 * XWUIIcon Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 */

.xwui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    line-height: 0;
    vertical-align: middle;
    color: currentColor;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Size variants (canonical 9-step scale) */
:is(.xwui-icon-3xs,.xwui-icon-xxxs) {
    width: 6px;
    height: 6px;
}
:is(.xwui-icon-4xs,.xwui-icon-xxxxs) {
    width: 3px;
    height: 3px;
}

:is(.xwui-icon-2xs,.xwui-icon-xxs) {
    width: 9px;
    height: 9px;
}

.xwui-icon-xs {
    width: 12px;
    height: 12px;
}

:is(.xwui-icon-s,.xwui-icon-sm) {
    width: 16px;
    height: 16px;
}

:is(.xwui-icon-m,.xwui-icon-md) {
    width: 20px;
    height: 20px;
}

:is(.xwui-icon-l,.xwui-icon-lg) {
    width: 24px;
    height: 24px;
}

.xwui-icon-xl {
    width: 32px;
    height: 32px;
}

:is(.xwui-icon-2xl,.xwui-icon-xxl) {
    width: 42px;
    height: 42px;
}

:is(.xwui-icon-3xl,.xwui-icon-xxxl) {
    width: 52px;
    height: 52px;
}
:is(.xwui-icon-4xl,.xwui-icon-xxxxl) {
    width: 83.2px;
    height: 83.2px;
}

/* Legacy size aliases */
.xwui-icon-s { width: 16px; height: 16px; }
.xwui-icon-m { width: 20px; height: 20px; }
.xwui-icon-l { width: 24px; height: 24px; }

/* Icon content wrapper */
.xwui-icon-content {
    margin: 0;
    padding: 0;
    line-height: 0;
}

/* Tile shapes (config.shape: square | circle | rounded).
 *
 * `shape` used to set only a border-radius on a box with no fill, so it had no
 * visible effect at all. A shaped icon is now a TILE: a soft tint of the icon's
 * own colour fills the box (so it follows light and dark, and any `color`), and
 * the glyph sits inset inside it. The radius comes from the box itself (inline,
 * per shape), so the three shapes differ; this rule supplies the fill.
 *
 * The tile IS the icon box, so `size` still sets the footprint and nothing in
 * the layout moves. The glyph is scaled by transform on the content host, not
 * by padding, because a percentage padding resolves against the PARENT's width
 * and would not track the box. The lazy placeholder wears the same classes, so
 * the tile is there before the glyph arrives.
 *
 *   --xwui-icon-tile-bg      the tile fill
 *   --xwui-icon-glyph-scale  glyph size as a fraction of the tile (0.6) */
.xwui-icon-shape-square,
.xwui-icon-shape-circle,
.xwui-icon-shape-rounded {
    background: var(--xwui-icon-tile-bg, color-mix(in srgb, currentColor 14%, transparent));
    box-sizing: border-box;
}

.xwui-icon-shape-square > .xwui-icon-content,
.xwui-icon-shape-circle > .xwui-icon-content,
.xwui-icon-shape-rounded > .xwui-icon-content {
    transform: scale(var(--xwui-icon-glyph-scale, 0.6));
}

/* SVG styling */
.xwui-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

/* Spin animation */
.xwui-icon-spin {
    animation: xwui-icon-spin 1s linear infinite;
}

@keyframes xwui-icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Hover states */
.xwui-icon-clickable {
    cursor: pointer;
}

.xwui-icon-clickable:hover {
    opacity: 0.8;
}

/* Color variants using CSS variables */
/* primary mixes the accent 70% toward the text colour, the arrangement the
   alerts use for their info text: the mix darkens it on a light ground and
   lightens it on a dark one. The bare indigo accent measured 2.75:1 on the dark
   ground, under the 3:1 a meaningful graphic needs. */
.xwui-icon-primary {
    color: color-mix(in srgb, var(--accent-primary, #4f46e5) 70%, var(--text-primary));
}

/* success and warning read the role ink, not the bare accent: emerald is 2.54:1
   and amber 2.15:1 on white, under the 3:1 a meaningful graphic needs (WCAG
   1.4.11), while the ink (the accent mixed 54% toward the text colour) is 5.63
   and 5.05. Themes without the token get the same mix from the accent. Both
   stay green and amber. */
.xwui-icon-success {
    color: var(--role-success-ink, color-mix(in srgb, var(--accent-success, #10b981) 54%, var(--text-primary)));
}

.xwui-icon-warning {
    color: var(--role-warning-ink, color-mix(in srgb, var(--accent-warning, #f59e0b) 54%, var(--text-primary)));
}

.xwui-icon-error {
    color: var(--accent-error, #ef4444);
}

.xwui-icon-muted {
    color: var(--text-tertiary, #adb5bd);
}

/* ── RTL mirroring ──────────────────────────────────────────────────────────
 * Horizontal directional pointers are tagged `.xwui-icon-directional` by the
 * component (when `flipRtl` resolves to a directional glyph). Under an RTL
 * writing direction they flip on the X axis, so a "next" chevron / back arrow
 * keeps pointing the way the reader moves. Pure CSS keyed off the inherited
 * `dir`, so it reacts with no JS re-render. The `.xwui-icon-no-effects` opt-out
 * already forces `transform: none !important`, so it wins over this. */
[dir="rtl"] .xwui-icon-directional {
    transform: scaleX(-1);
}

/* No effects modifier - removes all transforms, transitions, and animations */
.xwui-icon-no-effects,
.xwui-icon-no-effects svg {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Global icon-styles opt-out - `<html data-icons-styles="disabled">` (or
 * the same attribute on any ancestor) turns off ALL XWUI icon styling so
 * icons render with only the source SVG's own colors / sizes. No
 * `currentColor` inheritance from the parent's text colour, no XWUI-added
 * transitions, no `--icons-color-*` variable swaps. Intended for:
 *   • debugging "why does this icon look off" - isolates component CSS
 *     from library CSS
 *   • rendering brand / multi-hue logos at their authored palette without
 *     having to reach for XWUIIconConfig.themeMode or preserveColors
 *   • stripping interference when mounting third-party widgets that
 *     already style their own SVGs
 *
 * Nothing outside the `.xwui-icon` scope is affected - you can disable
 * icon styles without touching text colours, buttons, etc.
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-icons-styles="disabled"] .xwui-icon,
[data-icons-styles="disabled"] .xwui-icon {
    color: initial !important;
    transition: none !important;
}
:root[data-icons-styles="disabled"] .xwui-icon svg,
[data-icons-styles="disabled"] .xwui-icon svg {
    color: initial !important;
}
/* Suppress the `--icons-color-*` cascade by resetting the vars on the
   same scope, so SVGs that reference them fall back to their original
   explicit fills or stroke="currentColor" (which is now `initial`). */
:root[data-icons-styles="disabled"],
[data-icons-styles="disabled"] {
    --icons-color-main: initial;
    --icons-color-secondary: initial;
    --icons-color-accent: initial;
    --icons-color-transparent: transparent;
}