/* icon.css — the icon canon (web-spec §Icons), --theme seam spelling.
   Icons are purely isomorphic: an .icon element wearing an icon--<name>
   class whose mask points at a file in /icons/<set>/. Class names name the
   glyph's MEANING; only the URL knows the vendor. Color is currentColor;
   swapping icon sets is a directory swap, never a markup change. No inline
   svg, anywhere, ever. */

:root {
    --icon-size: var(--theme-icon-size, calc(var(--text-base) * 2.7));
    --icon-size-sm: var(--theme-icon-size-sm, calc(var(--text-base) * 1.5));
    --icon-mask-size: var(--theme-icon-mask-size, 65%);

    /* Mask-size fractional literals. No --theme; these define their names. */
    --icon-mask-quarter:         25%;
    --icon-mask-third:           33.333%;
    --icon-mask-half:            50%;
    --icon-mask-two-thirds:      66.666%;
    --icon-mask-three-quarters:  75%;
    --icon-mask-full:            100%;
}

.icon {
    display: inline-block;
    width: var(--icon-size);
    height: var(--icon-size);
    font-size: 0px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: var(--icon-mask-size);
    mask-size: var(--icon-mask-size);
}

.icon--sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }

/* glyphs — meaning-named classes, vendor lives only in the URL */
.icon--plus {
    -webkit-mask-image: url('/icons/lucide/plus.svg');
    mask-image: url('/icons/lucide/plus.svg');
}
.icon--minus {
    -webkit-mask-image: url('/icons/lucide/minus.svg');
    mask-image: url('/icons/lucide/minus.svg');
}
.icon--x {
    -webkit-mask-image: url('/icons/lucide/x.svg');
    mask-image: url('/icons/lucide/x.svg');
}
.icon--chevron {
    -webkit-mask-image: url('/icons/lucide/chevron-down.svg');
    mask-image: url('/icons/lucide/chevron-down.svg');
}
.icon--required {
    -webkit-mask-image: url('/icons/lucide/asterisk.svg');
    mask-image: url('/icons/lucide/asterisk.svg');
}
.icon--error {
    -webkit-mask-image: url('/icons/lucide/circle-alert.svg');
    mask-image: url('/icons/lucide/circle-alert.svg');
}
.icon--complete {
    -webkit-mask-image: url('/icons/lucide/check.svg');
    mask-image: url('/icons/lucide/check.svg');
}
.icon--row-menu {
    -webkit-mask-image: url('/icons/lucide/ellipsis-vertical.svg');
    mask-image: url('/icons/lucide/ellipsis-vertical.svg');
}
.icon--prev {
    -webkit-mask-image: url('/icons/lucide/chevron-left.svg');
    mask-image: url('/icons/lucide/chevron-left.svg');
}
.icon--next {
    -webkit-mask-image: url('/icons/lucide/chevron-right.svg');
    mask-image: url('/icons/lucide/chevron-right.svg');
}
.icon--account {
    -webkit-mask-image: url('/icons/lucide/circle-user-round.svg');
    mask-image: url('/icons/lucide/circle-user-round.svg');
}