/**
 * @name Icons
 * @selector [tuiIcons]
 *
 * @description
 * Icons directive applies styles to ::before and ::after pseudo elements
 *
 * @vars
 * --t-icon-start — depending on the data-icon-start, it can serve as either a mask (`svg`),
  a background (`img`), or content (`font`) for the ::before element
 * --t-icon-end — depending on the data-icon-end, it can serve as either a mask (`svg`),
  a background (`img`), or content (`font`) for the ::after element
 *
 * @example
 * <button tuiIcons style="--t-icon-start: url('icon.svg')"></button>
 *
 * @see-also
 * Button, Icon, Link
 */
:where([tuiIcons]&) {
    --t-icon-start: none;
    --t-icon-end: none;
    // Equals to 1 if the font offset is over 10px (150% OS scaling)
    --t-zoom: ~'calc(clamp(0, var(--t-font-offset, 0) - 10, 1))';

    &::before,
    &::after {
        content: '';
        display: var(--t-icon-start);
        inline-size: 1em;
        block-size: 1em;
        line-height: 1em;
        font-size: var(--tui-icon-size, 1.5rem);
        flex-shrink: 0;
        box-sizing: content-box;
        background: currentColor;
        zoom: calc(100% + 25% * var(--t-zoom));
        mask-image: var(--t-icon-start);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size:
            calc(~'min(1em, 100%)' + 10 * var(--tui-stroke-width)) ~'min(1em, 100%)',
            100%;
        mask-clip: padding-box;
    }

    &::after {
        display: var(--t-icon-end);
        mask-image: var(--t-icon-end);
    }

    &:where([data-icon-start='img'])::before {
        mask-image: none;
        background: var(--t-icon-start) no-repeat center / 1em padding-box;
    }

    &:where([data-icon-end='img'])::after {
        mask-image: none;
        background: var(--t-icon-end) no-repeat center / 1em padding-box;
    }

    &:where([data-icon-start='font'])::before,
    &:where([data-icon-end='font'])::after {
        display: grid;
        mask-image: none;
        background: none;
        font: 1.5em / 1 var(--tui-font-icon, inherit);
        text-align: center;
        place-content: center;
        text-transform: none;
    }

    &:where([data-icon-start='font'])::before {
        content: var(--t-icon-start);
    }

    &:where([data-icon-end='font'])::after {
        content: var(--t-icon-end);
    }
}