/* Icons (epic LXP-2719): Tabler SVG from assets/icons.svg, markup from sko_icon() / skoIcon(). Size follows the text
   (fs-* classes work), colour follows the text, one line width everywhere. */
.sko-i {
    display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -.14em; overflow: visible;
    fill: none; stroke: currentColor; stroke-width: var(--sko-i-w, 1.75); stroke-linecap: round; stroke-linejoin: round;
}
.sko-i.is-filled { fill: currentColor; stroke: none; }
.sko-i-chase { opacity: 0; }

/* Buttons space and size their <i> icons; the same for these */
.btn .sko-i { font-size: 1.25rem; margin-right: .35rem; vertical-align: middle; }
.btn.btn-icon .sko-i { margin-right: 0; }

/* The List | Calendar kind of switch: a Tabler icon has room around its drawing, a font icon fills its box, so 16px looks like the old 13px */
.ux2-seg .sko-i { font-size: 16px; }

/* Beside words, for the same reason: a little larger than the text, so it reads like the old font icon */
.ux2-btn:not(.ux2-btn-round) svg.sko-i, .hj-pill svg.sko-i, .hj-search > svg.sko-i, .hc-copy svg.sko-i, .hc-back svg.sko-i { font-size: 1.2em; }

/* SKOAI's icons in SKOAI's colours (as shell-next.css did for font icons): the gradient seen through the icon's shape */
html:is(.ux2-frame, .ux2-ios) #kt_header a[href$="/skoai/diskover"] .sko-i,
html:is(.ux2-frame, .ux2-ios) #kt_aside .menu-link[href$="/skoai/studio"] .menu-icon .sko-i {
    background: linear-gradient(135deg, #db2777 0%, #a21caf 45%, #6d28d9 100%);
    -webkit-mask: var(--sko-i-mask) center / contain no-repeat;
    mask: var(--sko-i-mask) center / contain no-repeat;
}
html:is(.ux2-frame, .ux2-ios) #kt_header a[href$="/skoai/diskover"] .sko-i { --sko-i-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6z' /%3E%3C/svg%3E"); }
html:is(.ux2-frame, .ux2-ios) #kt_aside .menu-link[href$="/skoai/studio"] .menu-icon .sko-i { --sko-i-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21l15 -15l-3 -3l-15 15l3 3' /%3E%3Cpath d='M15 6l3 3' /%3E%3Cpath d='M9 3a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2' /%3E%3Cpath d='M19 13a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2' /%3E%3C/svg%3E"); }
html:is(.ux2-frame, .ux2-ios) #kt_header a[href$="/skoai/diskover"] .sko-i use,
html:is(.ux2-frame, .ux2-ios) #kt_aside .menu-link[href$="/skoai/studio"] .menu-icon .sko-i use { visibility: hidden; }
html.ux2-tab body[data-kt-aside-minimize="on"] #kt_aside .menu-link.active[href$="/skoai/studio"] .menu-icon .sko-i { background: #fff; }

/* Hover (engine/icons.php, UX2_ICON_HOVER): only icons printed with 'hover'. Mouse only; never with Reduce motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    html:not(.ux2-calm).hv-chase :is(a, button, .menu-link):hover > .sko-i:has(.sko-i-chase):not(.is-filled) .sko-i-base,
    html:not(.ux2-calm).hv-chase .menu-link:hover .sko-i:has(.sko-i-chase):not(.is-filled) .sko-i-base { animation: sko-i-dim .9s ease-in-out; }
    html:not(.ux2-calm).hv-chase :is(a, button, .menu-link):hover > .sko-i:not(.is-filled) .sko-i-chase,
    html:not(.ux2-calm).hv-chase .menu-link:hover .sko-i:not(.is-filled) .sko-i-chase {
        stroke-dasharray: .28 .72; stroke-width: calc(var(--sko-i-w, 1.75) + .5px); animation: sko-i-chase .9s ease-in-out;
    }
    html:not(.ux2-calm).hv-draw :is(a, button, .menu-link):hover > .sko-i:has(.sko-i-chase):not(.is-filled) .sko-i-base,
    html:not(.ux2-calm).hv-draw .menu-link:hover .sko-i:has(.sko-i-chase):not(.is-filled) .sko-i-base {
        stroke-dasharray: 1; animation: sko-i-draw .6s ease-out;
    }
}
@keyframes sko-i-dim { 0%, 100% { opacity: 1; } 20%, 75% { opacity: .28; } }
@keyframes sko-i-chase { 0% { opacity: 0; stroke-dashoffset: 1; } 15%, 80% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -.1; } }
@keyframes sko-i-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }