/*
-- nom: tic.css --
-- llibreria: loT --
-- grup: Components --
-- autor: A.Moseguí / TT22 --
-- versió: 26.1.0 --
-- descripció: Tic amb dos modes de renderització: background-image (per defecte, preserva colors originals) i mask-image (mode ink, silueta colorejada amb --tic-ink-cl). Qualsevol icona del catàleg o del sistema gen pot ser inkada afegint un modificador --ink-*. --
-- dependència: tic-src.css i tic-core.css --
-- nota: el prefix de classe `tic--ink` queda reservat per al sistema ink. No es poden crear altres modificadors que el continguin com a subcadena. --
*/

/* 👉 BASE */
:root {
    /* Mides fixes (rem) — estàndard d'icona web: 16/24/32px */
    --tic-size-1r: 1rem;
    --tic-size-1_5r: 1.5rem;
    --tic-size-2r: 2rem;
    --tic-size-3r: 3rem;
    /* Mides adaptatives (%) */
    --tic-size-s: 60%;
    --tic-size-m: 75%;
    --tic-size-l: 90%;
    /* Mida del tic per defecte quadrat */
    --tic-size: var(--tic-size-m);

    --tic-img: var(--ic-default);
    /* Slots d'injecció per al sistema gen. L'app les omple:
       - amb tema (light/dark): a <html> o en un element amb data-theme. Una sola imatge per àmbit de tema.
       - fix: via style="" a la icona o en qualsevol avantpassat. */
    --tic-gen-light-svg: initial;
    --tic-gen-dark-svg:  initial;
    --tic-gen-light-rst: initial;
    --tic-gen-dark-rst:  initial;
    --tic-gen-fix-svg:   initial;
    --tic-gen-fix-rst:   initial;
}
.tic {
    /* Default del color ink resolt aquí (no al :root); les classes
       .tic--ink* i [class*="tic--ink"] viuen al mateix element. */
    --tic-ink-cl: var(--cl-cp-fg);
    display: inline-block;
    inline-size: var(--tic-size);
    block-size: var(--tic-size);
    vertical-align: middle;
    background-image: var(--tic-img);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

/* 👉 TIC MODIFICADORS DE MIDA */
/* fixes (rem) */
.tic--size-1r { --tic-size: var(--tic-size-1r); }
.tic--size-1_5r { --tic-size: var(--tic-size-1_5r); }
.tic--size-2r { --tic-size: var(--tic-size-2r); }
.tic--size-3r { --tic-size: var(--tic-size-3r); }
/* adaptatives (% del slot) */
.tic--size-s { --tic-size: var(--tic-size-s); }
.tic--size-m { --tic-size: var(--tic-size-m); }
.tic--size-l { --tic-size: var(--tic-size-l); }

/* 👉 TIC MODIFICADORS SEMÀNTICS */
/* Catàleg SVG */
.tic--add-o-svg    { --tic-img: var(--ic-add-o-svg); }
.tic--add-f-svg    { --tic-img: var(--ic-add-f-svg); }
.tic--book-o-svg   { --tic-img: var(--ic-book-o-svg); }
.tic--book-f-svg   { --tic-img: var(--ic-book-f-svg); }
.tic--danger-o-svg { --tic-img: var(--ic-danger-o-svg); }
.tic--danger-f-svg { --tic-img: var(--ic-danger-f-svg); }
.tic--edit-o-svg   { --tic-img: var(--ic-edit-o-svg); }
.tic--edit-f-svg   { --tic-img: var(--ic-edit-f-svg); }
.tic--exit-o-svg   { --tic-img: var(--ic-exit-o-svg); }
.tic--info-o-svg   { --tic-img: var(--ic-info-o-svg); }
.tic--info-f-svg   { --tic-img: var(--ic-info-f-svg); }
.tic--list-o-svg   { --tic-img: var(--ic-list-o-svg); }
.tic--list-f-svg   { --tic-img: var(--ic-list-f-svg); }
.tic--door-o-svg   { --tic-img: var(--ic-door-o-svg); }
.tic--door-f-svg   { --tic-img: var(--ic-door-f-svg); }
.tic--map-o-svg    { --tic-img: var(--ic-map-o-svg); }
.tic--map-f-svg    { --tic-img: var(--ic-map-f-svg); }
.tic--remove-o-svg { --tic-img: var(--ic-remove-o-svg); }
.tic--remove-f-svg { --tic-img: var(--ic-remove-f-svg); }
.tic--save-o-svg   { --tic-img: var(--ic-save-o-svg); }
.tic--save-f-svg   { --tic-img: var(--ic-save-f-svg); }

/* Catàleg RST */
.tic--gm-rst      { --tic-img: var(--ic-gm-rst); }
.tic--arrels-rst  { --tic-img: var(--ic-arrels-rst); }
.tic--map-old-rst { --tic-img: var(--ic-map-old-rst); }
.tic--map-loc-rst { --tic-img: var(--ic-map-loc-rst); }
.tic--world-loc-rst { --tic-img: var(--ic-world-loc-rst); }

/* Invariants */
.tic--by-fix-rst       { --tic-img: var(--ic-by-fix-rst); }
.tic--contact-fix-rst  { --tic-img: var(--ic-contact-fix-rst); }
.tic--exit-fix-rst     { --tic-img: var(--ic-exit-fix-rst); }
.tic--cat-flag-fix-rst { --tic-img: var(--ic-cat-flag-fix-rst); }

/* 👉 TIC MODIFICADOR GENÈRIC */
/* Sistema obert per apps externes.
   - .tic--gen-svg / .tic--gen-rst (amb tema): les variables --tic-gen-light-* i --tic-gen-dark-*
     s'injecten a <html> o en un element amb data-theme. Limitació coneguda: totes les icones
     gen amb tema d'un mateix àmbit de tema mostren la mateixa imatge.
   - .tic--gen-fix-svg / .tic--gen-fix-rst (sense tema): --tic-gen-fix-* s'injecta via style=""
     a la icona o en qualsevol avantpassat. Admet una imatge diferent per icona. */
.tic--gen-svg     { --tic-img: var(--ic-gen-svg); }
.tic--gen-rst     { --tic-img: var(--ic-gen-rst); }
.tic--gen-fix-svg { --tic-img: var(--ic-gen-fix-svg); }
.tic--gen-fix-rst { --tic-img: var(--ic-gen-fix-rst); }

/* 👉 TIC MODE INK */
/* Commuta el renderitzat de background-image a mask-image. La icona perd els seus colors originals i es pinta amb --tic-ink-cl. */
[class*="tic--ink"] {
    background-image: none;
    background-color: var(--tic-ink-cl);
    -webkit-mask-image: var(--tic-img);
            mask-image: var(--tic-img);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center center;
            mask-position: center center;
}

/* 👉 TIC MODIFICADORS DE COLOR INK */
/* Cadascun activa el mode ink i posa el color. El dev pot sobrescriure amb style="--tic-ink-cl: ...". */
.tic--ink          { --tic-ink-cl: var(--cl-cp-fg); }
.tic--ink-success  { --tic-ink-cl: var(--cl-success); }
.tic--ink-error    { --tic-ink-cl: var(--cl-error); }
.tic--ink-warning  { --tic-ink-cl: var(--cl-warning); }
.tic--ink-question { --tic-ink-cl: var(--cl-question); }
.tic--ink-select   { --tic-ink-cl: var(--cl-select); }