/*
 * ds-icons — stil znakova stanja u tabelama (kolone tipa D/P: ima dokument, placeno, ...).
 *
 * Zasto uopste postoji: Bootstrap 5 je izbacio glyphicons, a legacy ekrani su ih koristili kao
 * JEDINI nosilac stanja u koloni — plus/kvacica/iks na fiksnom mestu, gde je znak ujedno i dugme.
 * Taj obrazac se pokazao citljivijim od badge-ova, pa se zadrzava, ali oblik znaka je stvar ukusa i
 * ekrana, pa je izbor prepusten korisniku (/customize).
 *
 * Markup je uvek isti (<span class="ds-ico ds-ico--plus">), a izgled dolazi iz TOKENA, ne iz
 * selektora vece specificnosti. To je namerno: tokeni se nasledjuju, pa isti stil moze da vazi
 * globalno (html[data-ds-icons]) ILI lokalno ([data-ds-ico-scope]) — bez borbe specificnosti.
 * Zahvaljujuci tome /customize prikazuje svih sedam stilova jedan pored drugog, uzivo.
 *
 * Glif se crta kao CSS maska nad inline SVG-om (background-color: currentColor), pa nasledjuje boju
 * teksta i ostaje ostar na svakoj velicini i pri svakom ds-ui-scale.
 */

/* ---------------------------------------------------------------- tonovi */
/* Tonovi su ovde, a ne na Bootstrap `text-*`, jer je `.text-warning` (#ffc107) na beloj podlozi
   ispod citljivog kontrasta. Tamna tema ih redefinise u ds-prefs.css. */

:root {
    --ds-ico-c-primary: var(--ds-accent, #2fa4e7);
    --ds-ico-c-success: #198754;
    --ds-ico-c-danger: #dc3545;
    --ds-ico-c-warning: #b8860b;
    --ds-ico-c-secondary: #6c757d;
    --ds-ico-c-muted: #8a9099;
}

.ds-ico-primary { color: var(--ds-ico-c-primary); }
.ds-ico-success { color: var(--ds-ico-c-success); }
.ds-ico-danger { color: var(--ds-ico-c-danger); }
.ds-ico-warning { color: var(--ds-ico-c-warning); }
.ds-ico-secondary { color: var(--ds-ico-c-secondary); }
.ds-ico-muted { color: var(--ds-ico-c-muted); }
.ds-ico-body { color: inherit; }

/* ---------------------------------------------------------------- oblici glifova */
/* Debeo potez = podrazumevano; oblik najblizi glyphicon-u sa legacy ekrana. */

:root,
[data-ds-ico-scope="bold"] {
    --ds-ico-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    --ds-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6 6.3 12 13 4.6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ds-ico-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    --ds-ico-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

html[data-ds-icons="thin"],
[data-ds-ico-scope="thin"] {
    --ds-ico-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.4v9.2M3.4 8h9.2' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    --ds-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.5 6.3 11.6 12.8 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ds-ico-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 4.4l7.2 7.2M11.6 4.4l-7.2 7.2' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Unicode: doslovno kao legacy ekran — znak iz fonta, bez maske. Najlaksi za renderer, ali oblik
   zavisi od fonta koji je korisniku dostupan, pa nije podrazumevan. */
html[data-ds-icons="unicode"],
[data-ds-ico-scope="unicode"] {
    --ds-ico-mask: none;
    --ds-ico-glyph-bg: transparent;
    --ds-ico-content: var(--ds-ico-char);
    --ds-ico-w: auto;
    --ds-ico-h: auto;
}

/* ---------------------------------------------------------------- okviri */

html[data-ds-icons="ring"],
[data-ds-ico-scope="ring"] {
    --ds-ico-border: 1.5px solid currentColor;
    --ds-ico-radius: 50%;
    --ds-ico-scale: 0.8;
    --ds-ico-box-w: 1.6em;
}

html[data-ds-icons="solid"],
[data-ds-ico-scope="solid"] {
    --ds-ico-bg: currentColor;
    --ds-ico-radius: 50%;
    --ds-ico-scale: 0.8;
    --ds-ico-box-w: 1.6em;
}

/* Kod pune podloge glif mora da bude u boji te podloge, inace nestane. Izuzetak je „dash", koji
   nema podlogu — zato se token postavlja na ELEMENTU (pobedjuje nasledjeno), a ne na <html>. */
html[data-ds-icons="solid"] .ds-ico:not(.ds-ico--dash),
[data-ds-ico-scope="solid"] .ds-ico:not(.ds-ico--dash) {
    --ds-ico-glyph-bg: var(--ds-surface, #ffffff);
}

html[data-ds-icons="chip"],
[data-ds-ico-scope="chip"] {
    --ds-ico-border: 1px solid currentColor;
    --ds-ico-radius: 4px;
    --ds-ico-scale: 0.8;
    --ds-ico-box-w: 1.75em;
}

html[data-ds-icons="duo"],
[data-ds-ico-scope="duo"] {
    --ds-ico-bg: color-mix(in srgb, currentColor 15%, transparent);
    --ds-ico-radius: 4px;
    --ds-ico-scale: 0.8;
    --ds-ico-box-w: 1.75em;
}

/* ---------------------------------------------------------------- element */

.ds-ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--ds-ico-box-w, 1.5rem);
    min-height: var(--ds-ico-box-w, 1.5rem);
    width: var(--ds-ico-box-w, auto);
    height: var(--ds-ico-box-w, auto);
    line-height: 1;
    vertical-align: middle;
    font-size: calc(1.05em * var(--ds-ico-scale, 1));
    border: var(--ds-ico-border, 0);
    border-radius: var(--ds-ico-radius, 0);
    background-color: var(--ds-ico-bg, transparent);
}

.ds-ico::before {
    content: var(--ds-ico-content, "");
    display: block;
    width: var(--ds-ico-w, 1em);
    height: var(--ds-ico-h, 1em);
    background-color: var(--ds-ico-glyph-bg, currentColor);
    -webkit-mask: var(--ds-ico-mask, var(--ds-ico-glyph)) center / contain no-repeat;
    mask: var(--ds-ico-mask, var(--ds-ico-glyph)) center / contain no-repeat;
}

.ds-ico--plus { --ds-ico-glyph: var(--ds-ico-plus); --ds-ico-char: "+"; }
.ds-ico--check { --ds-ico-glyph: var(--ds-ico-check); --ds-ico-char: "\2713"; }
.ds-ico--x { --ds-ico-glyph: var(--ds-ico-x); --ds-ico-char: "\2717"; }

/* „Nije primenljivo" nije stanje nego odsustvo stanja — okvir bi mu dao težinu koju nema. */
.ds-ico--dash {
    --ds-ico-glyph: var(--ds-ico-dash);
    --ds-ico-char: "\2014";
    --ds-ico-border: 0;
    --ds-ico-bg: transparent;
}

/* Dugme koje nosi znak: bez chrome-a, ali sa metom dovoljnom za prst. */
button.ds-ico {
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

button.ds-ico:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

/* Zaostatak/upozorenje: razlika mora da bude u OBLIKU, ne samo u boji — inace nestane za korisnika
   koji ne razlikuje boje i na crno-belom stampanju. Apsolutno pozicionirana da bi kod okvirnih
   stilova stajala IZVAN kruga/chipa, a ne unutar njega gde bi razbila oblik. */
.ds-ico-mark {
    position: absolute;
    top: -0.15em;
    right: -0.15em;
    font-size: 0.62em;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

/* ---------------------------------------------------------------- stampa */
/* Na papiru boje nema; okviri samo trose toner, a oblik glifa i dalje nosi znacenje. */

@media print {
    .ds-ico {
        --ds-ico-border: 0;
        --ds-ico-bg: transparent;
        --ds-ico-glyph-bg: #000000;
    }
}