/*
 * Tabler Icons v3 "-filled" compatibility shim.
 *
 * Background: Tabler Icons webfont was upgraded to v3. From v3.36.0 the filled
 * glyphs were split out of the main `tabler-icons.min.css` webfont into a separate
 * `tabler-icons-filled` font. As a result every `ti-*-filled` class in this app
 * stopped resolving (empty ::before). Icon-only elements (e.g. the Discord tag
 * buttons on the team screen) then collapsed to 0x0.
 *
 * We can't just load the official `tabler-icons-filled.min.css` globally because
 * it contains `.ti { font-family: "tabler-icons-filled" !important }`, which would
 * force EVERY icon (including all the outline ones) to the filled font.
 *
 * Instead this shim:
 *   1. Declares the filled @font-face only.
 *   2. Maps the specific `ti-*-filled` class names this app uses to their glyph
 *      codepoints in the filled font, scoped to `.ti` so outline icons are untouched.
 *
 * If a new `-filled` icon is introduced, add its class + codepoint here. Codepoints
 * come from @tabler/icons-webfont dist/tabler-icons-filled.min.css (base name).
 */

@font-face {
    font-family: "tabler-icons-filled";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3/dist/fonts/tabler-icons-filled.woff2") format("woff2"),
         url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3/dist/fonts/tabler-icons-filled.woff") format("woff"),
         url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3/dist/fonts/tabler-icons-filled.ttf") format("truetype");
}

/* Route only the -filled classes to the filled font (outline icons stay on the base font). */
.ti.ti-alert-triangle-filled,
.ti.ti-arrow-badge-right-filled,
.ti.ti-brand-discord-filled,
.ti.ti-brand-google-filled,
.ti.ti-caret-down-filled,
.ti.ti-caret-right-filled,
.ti.ti-circle-check-filled,
.ti.ti-circle-letter-r-filled,
.ti.ti-circle-x-filled,
.ti.ti-flag-filled,
.ti.ti-flame-filled,
.ti.ti-settings-filled,
.ti.ti-star-filled,
.ti.ti-trophy-filled {
    font-family: "tabler-icons-filled" !important;
}

/* Glyph codepoints (from the v3 filled font, under its base icon names). */
.ti-alert-triangle-filled::before    { content: "\f6f0"; }
.ti-arrow-badge-right-filled::before { content: "\f7d8"; }
.ti-brand-discord-filled::before     { content: "\f7e4"; }
.ti-brand-google-filled::before      { content: "\fd1a"; }
.ti-caret-down-filled::before        { content: "\fb2a"; }
.ti-caret-right-filled::before       { content: "\fb2c"; }
.ti-circle-check-filled::before      { content: "\f704"; }
.ti-circle-letter-r-filled::before   { content: "\fe6e"; }
.ti-circle-x-filled::before          { content: "\f739"; }
.ti-flag-filled::before              { content: "\f67a"; }
.ti-flame-filled::before             { content: "\100c6"; }
.ti-settings-filled::before          { content: "\f69e"; }
.ti-star-filled::before              { content: "\f6a6"; }
.ti-trophy-filled::before            { content: "\f6af"; }