/* =========================================================
   SI – STANDARD ICON SYSTEM (SVG BASED)
   ---------------------------------------------------------
   DESIGN GOALS
   1. Colored SVGs by default (use original SVG colors)
   2. Optional CSS-driven coloring (opt-in only)
   3. Font Awesome–like sizing utilities
   4. Zero JS, zero font dependency
   5. Scalable to unlimited icons
   ========================================================= */


/* =========================================================
   1) BASE ICON STYLE (DEFAULT MODE)
   ---------------------------------------------------------
   - Uses background-image
   - Preserves original SVG colors
   - This is the DEFAULT behavior
   ========================================================= */

.si {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    line-height: 1;

    /* Native SVG rendering */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Safety:
   Prevent text color from accidentally affecting icons
   when NOT in color mode */
.si:not(.si-color) {
    color: initial;
}


/* =========================================================
   2) SPACING HELPERS (INLINE USAGE)
   ---------------------------------------------------------
   Makes icons sit nicely with text
   ========================================================= */

/* icon AFTER text */
.si + span,
.si + i,
.si + a {
    margin-left: 6px;
}

/* icon BEFORE text (most common case) */
a .si, button .si {
    margin-right: 8px;
}


/* =========================================================
   3) SIZE UTILITIES (FONT-AWESOME STYLE)
   ---------------------------------------------------------
   Uses `em` so icons scale with font size
   ========================================================= */

.si-1x { width: 1em; height: 1em; }
.si-2x { width: 2em; height: 2em; }
.si-3x { width: 3em; height: 3em; }
.si-4x { width: 4em; height: 4em; }
.si-5x { width: 5em; height: 5em; }

/* Semantic sizes (optional, human-friendly) */
.si-sm { width: 0.875em; height: 0.875em; }
.si-md { width: 1.25em;  height: 1.25em; }
.si-lg { width: 1.5em;   height: 1.5em; }
.si-xl { width: 2em;     height: 2em; }

/* Keep alignment correct for all size variants */
.si[class*="si-"] {
    vertical-align: middle;
}


/* =========================================================
   4) COLOR MODE (EXPLICIT OPT-IN)
   ---------------------------------------------------------
   - Switches rendering from background-image → mask-image
   - Allows CSS color utilities
   - ONLY active when `.si-color` is present
   ========================================================= */

.si-color {
    background-image: none !important;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}


/* =========================================================
   5) COLOR UTILITIES
   ---------------------------------------------------------
   Used ONLY with `.si-color`
   ========================================================= */

.si-dark  { color: #000000; } /* perfect black */
.si-light { color: #ffffff; } /* perfect white */
.si-red   { color: #e53935; }
.si-green { color: #2e7d32; }
.si-gold  { color: #d4af37; }


/* =========================================================
   6) ICON DEFINITIONS (DEFAULT MODE)
   ---------------------------------------------------------
   Each icon must define:
   - background-image (default / colored SVG)
   ========================================================= */
.si-attachment { background-image:url('attachment.svg'); }
.si-back-arrow { background-image:url('back-arrow.svg'); }
.si-bell { background-image:url('bell.svg'); }
.si-caret-down { background-image:url('caret-down.svg'); }
.si-check { background-image:url('check.svg'); }
.si-close { background-image:url('close.svg'); }
.si-copy { background-image:url('copy.svg'); }
.si-code { background-image:url('code.svg'); }
.si-debug { background-image:url('debug.svg'); }
.si-docs { background-image:url('docs.svg'); }
.si-download { background-image:url('download.svg'); }
.si-eye { background-image:url('eye.svg'); }
.si-emoji { background-image:url('emoji.svg'); }
.si-export { background-image:url('export.svg'); }
.si-forward { background-image:url('foreward.svg'); }
.si-foreward { background-image:url('foreward.svg'); }
.si-gear { background-image:url('gear.svg'); }
.si-logout { background-image:url('logout.svg'); }
.si-moon { background-image:url('moon.svg'); }
.si-mic { background-image:url('mic.svg'); }
.si-mute { background-image:url('mute.svg'); }
.si-options-vertical { background-image:url('options-vertical.svg'); }
.si-pause { background-image:url('pause.svg'); }
.si-pin { background-image:url('pin.svg'); }
.si-pics { background-image:url('pics.svg'); }
.si-play { background-image:url('play.svg'); }
.si-plus { background-image:url('plus.svg'); }
.si-poll { background-image:url('poll.svg'); }
.si-prev { background-image:url('prev.svg'); }
.si-next { background-image:url('next.svg'); }
.si-reply { background-image:url('reply.svg'); }
.si-search { background-image:url('search.svg'); }
.si-seen { background-image:url('seen.svg'); }
.si-send { background-image:url('send.svg'); }
.si-stop { background-image:url('stop.svg'); }
.si-star { background-image:url('star.svg'); }
.si-sent { background-image:url('sent.svg'); }
.si-sun { background-image:url('sun.svg'); }
.si-theme { background-image:url('theme.svg'); }
.si-yt { background-image:url('yt.svg'); }
/* =========================================================
   7) ICON DEFINITIONS (COLOR MODE MASK BINDINGS)
   ---------------------------------------------------------
   Required so icons render in `.si-color` mode
   Each icon MUST have a matching mask-image
   ========================================================= */
.si-color.si-attachment { -webkit-mask-image:url('attachment.svg'); mask-image:url('attachment.svg'); }
.si-color.si-back-arrow { -webkit-mask-image:url('back-arrow.svg'); mask-image:url('back-arrow.svg'); }
.si-color.si-bell { -webkit-mask-image:url('bell.svg'); mask-image:url('bell.svg'); }
.si-color.si-caret-down { -webkit-mask-image:url('caret-down.svg'); mask-image:url('caret-down.svg'); }
.si-color.si-check { -webkit-mask-image:url('check.svg'); mask-image:url('check.svg'); }
.si-color.si-close { -webkit-mask-image:url('close.svg'); mask-image:url('close.svg'); }
.si-color.si-copy { -webkit-mask-image:url('copy.svg'); mask-image:url('copy.svg'); }
.si-color.si-code { -webkit-mask-image:url('code.svg'); mask-image:url('code.svg'); }
.si-color.si-debug { -webkit-mask-image:url('debug.svg'); mask-image:url('debug.svg'); }
.si-color.si-docs { -webkit-mask-image:url('docs.svg'); mask-image:url('docs.svg'); }
.si-color.si-download { -webkit-mask-image:url('download.svg'); mask-image:url('download.svg'); }
.si-color.si-eye { -webkit-mask-image:url('eye.svg'); mask-image:url('eye.svg'); }
.si-color.si-emoji { -webkit-mask-image:url('emoji.svg'); mask-image:url('emoji.svg'); }
.si-color.si-export { -webkit-mask-image:url('export.svg'); mask-image:url('export.svg'); }
.si-color.si-forward { -webkit-mask-image:url('foreward.svg'); mask-image:url('foreward.svg'); }
.si-color.si-foreward { -webkit-mask-image:url('foreward.svg'); mask-image:url('foreward.svg'); }
.si-color.si-gear { -webkit-mask-image:url('gear.svg'); mask-image:url('gear.svg'); }
.si-color.si-logout { -webkit-mask-image:url('logout.svg'); mask-image:url('logout.svg'); }
.si-color.si-moon { -webkit-mask-image:url('moon.svg'); mask-image:url('moon.svg'); }
.si-color.si-mic { -webkit-mask-image:url('mic.svg'); mask-image:url('mic.svg'); }
.si-color.si-mute { -webkit-mask-image:url('mute.svg'); mask-image:url('mute.svg'); }
.si-color.si-options-vertical { -webkit-mask-image:url('options-vertical.svg'); mask-image:url('options-vertical.svg'); }
.si-color.si-pause { -webkit-mask-image:url('pause.svg'); mask-image:url('pause.svg'); }
.si-color.si-pin { -webkit-mask-image:url('pin.svg'); mask-image:url('pin.svg'); }
.si-color.si-pics { -webkit-mask-image:url('pics.svg'); mask-image:url('pics.svg'); }
.si-color.si-play { -webkit-mask-image:url('play.svg'); mask-image:url('play.svg'); }
.si-color.si-plus { -webkit-mask-image:url('plus.svg'); mask-image:url('plus.svg'); }
.si-color.si-poll { -webkit-mask-image:url('poll.svg'); mask-image:url('poll.svg'); }
.si-color.si-prev { -webkit-mask-image:url('prev.svg'); mask-image:url('prev.svg'); }
.si-color.si-next { -webkit-mask-image:url('next.svg'); mask-image:url('next.svg'); }
.si-color.si-reply { -webkit-mask-image:url('reply.svg'); mask-image:url('reply.svg'); }
.si-color.si-search { -webkit-mask-image:url('search.svg'); mask-image:url('search.svg'); }
.si-color.si-seen { -webkit-mask-image:url('seen.svg'); mask-image:url('seen.svg'); }
.si-color.si-send { -webkit-mask-image:url('send.svg'); mask-image:url('send.svg'); }
.si-color.si-stop { -webkit-mask-image:url('stop.svg'); mask-image:url('stop.svg'); }
.si-color.si-star { -webkit-mask-image:url('star.svg'); mask-image:url('star.svg'); }
.si-color.si-sent { -webkit-mask-image:url('sent.svg'); mask-image:url('sent.svg'); }
.si-color.si-sun { -webkit-mask-image:url('sun.svg'); mask-image:url('sun.svg'); }
.si-color.si-theme { -webkit-mask-image:url('theme.svg'); mask-image:url('theme.svg'); }
.si-color.si-yt { -webkit-mask-image:url('yt.svg'); mask-image:url('yt.svg'); }

/* =========================================================
   8) OPTIONAL UX POLISH (SAFE DEFAULTS)
   ========================================================= */

/* Slight feedback on hover */
a:hover .si {
    opacity: 0.85;
}

/* Ensure icons look correct on dark themed containers */
.w3-theme .si-color {
    color: #ffffff;
}