/* ========================================================================= Hitech — Icon set ------------------------------------------------------------------------- ONE place for reusable inline SVG glyphs, app-wide. Icons are theme-agnostic shapes (so they live in :root), drawn in `currentColor` via CSS mask — so a single definition works on any background and inherits the surrounding text colour. No image files, no copied into markup. Two ways to use the same source: 1. In markup — size to 1em, takes currentColor: (override size with a font-size or width/height on the element) 2. In component CSS — reference the source var in your own mask-image: .my-thing { -webkit-mask-image: var(--hc-icon-check); mask-image: var(--hc-icon-check); } To add an icon: add a `--hc-icon-NAME` source var, then a `.hc-icon--NAME` modifier. The `hc-icon` prefix keeps these from colliding with anything. ========================================================================= */ :root { --hc-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.42z'/%3E%3C/svg%3E"); --hc-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E"); --hc-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E"); --hc-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9zm3 11c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z'/%3E%3C/svg%3E"); --hc-icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E"); --hc-icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E"); --hc-icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E"); --hc-icon-chevron-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E"); /* side-panel toggle: filled left pane in an outlined frame */ --hc-icon-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H10V6h11z'/%3E%3C/svg%3E"); --hc-icon-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z'/%3E%3C/svg%3E"); --hc-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E"); --hc-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E"); --hc-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E"); /* palette — paint dots are holes (evenodd) so the mask silhouette reads as a palette */ --hc-icon-palette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10c1.38 0 2.5-1.12 2.5-2.5 0-.61-.23-1.2-.64-1.67-.08-.1-.13-.21-.13-.33 0-.28.22-.5.5-.5H16c3.31 0 6-2.69 6-6 0-4.96-4.49-9-10-9zm5.5 11c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm-3-4c-.83 0-1.5-.67-1.5-1.5S13.67 6 14.5 6s1.5.67 1.5 1.5S15.33 9 14.5 9zM6.5 13c-.83 0-1.5-.67-1.5-1.5S5.67 10 6.5 10 8 10.67 8 11.5 7.33 13 6.5 13zm3-4C8.67 9 8 8.33 8 7.5S8.67 6 9.5 6s1.5.67 1.5 1.5S10.33 9 9.5 9z'/%3E%3C/svg%3E"); /* Activity glyphs — referenced by ACTIVITY.Icon (the row stores the name only) */ --hc-icon-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.4 6 14 4H5v17h2v-7h5.6l.4 2h7V6z'/%3E%3C/svg%3E"); --hc-icon-plane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5C13 2.67 12.33 2 11.5 2S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E"); --hc-icon-flask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.8 18.4 14 10.67V6.5l1.35-1.69c.26-.33.03-.81-.39-.81H9.04c-.42 0-.65.48-.39.81L10 6.5v4.17L4.2 18.4c-.49.66-.02 1.6.8 1.6h14c.82 0 1.29-.94.8-1.6z'/%3E%3C/svg%3E"); --hc-icon-gauge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 0 0-6.85 12.14h13.7A8 8 0 0 0 12 4zm0 2a6 6 0 0 1 5.19 9H6.81A6 6 0 0 1 12 6zm-1 3 1.5 4.5a1 1 0 1 1-1.9.6L9 9z'/%3E%3C/svg%3E"); --hc-icon-monitor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18z'/%3E%3C/svg%3E"); --hc-icon-circuit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 548.791 548.791'%3E%3Cpath d='M122.983,59.272c-11.561-6.608-26.086-10.251-40.908-10.251c-16.438,0-31.948,4.379-43.653,12.345 C13.196,78.512,0,120.855,0,153.817v181.152c0,35.82,18.044,82.936,41.96,109.576l6.579,7.344 c24.499,27.293,70.638,47.881,107.32,47.881h315.342c43.51,0,77.59-26.709,77.59-60.809c0-32.531-29.154-68.449-56.59-85.729 l-29.932-18.838c-19.439-12.25-39.809-41.387-43.584-62.366c-6.246-34.741-28.688-70.762-52.213-83.777 c-11.848-6.56-26.029-10.175-39.941-10.175c-15.416,0-29.377,4.456-39.293,12.565c-14.879,12.135-31.9,36.06-39.579,55.634 c-4.657,11.867-20.817,38.585-36.557,57.968c-6.923,8.502-17.681,11.705-23.371,6.445c-10.098-9.324-21.391-38.221-21.391-62.95 v-96.151C166.34,118.837,151.145,75.356,122.983,59.272z M151.46,279l-9.266,2.391c-2.974-11.542-4.552-23.18-4.552-33.642 v-15.673h9.562v15.673C147.215,257.426,148.678,268.232,151.46,279z M145.799,134.415c0.938,5.814,1.406,11.59,1.406,17.174 v32.005h-9.562v-32.005c0-5.078-0.43-10.337-1.291-15.654L145.799,134.415z M82.084,68.146c11.552,0,22.711,2.744,31.422,7.726 c4.619,2.64,9.065,6.637,13.187,11.887l-7.516,5.909c-3.366-4.274-6.866-7.468-10.414-9.495 c-7.296-4.169-16.763-6.464-26.68-6.464L80,77.738l-0.296-9.553L82.084,68.146z M35.314,92.731l8.157,4.982 c-7.028,11.504-12.288,27.913-14.085,43.873l-9.505-1.062C21.851,122.978,27.473,105.564,35.314,92.731z M19.125,189.523h9.562 v48.482h-9.562V189.523z M19.125,286.486h9.562v48.482h-9.562V286.486z M47.42,420.467c-8.539-12.574-16.084-28.543-21.257-44.963 l9.123-2.869c4.896,15.559,12.011,30.639,20.043,42.459L47.42,420.467z M128.052,476.617 c-15.807-4.254-31.929-11.58-45.403-20.615l5.336-7.938c12.622,8.473,27.731,15.338,42.553,19.326L128.052,476.617z M225.924,480.654h-48.482v-9.562h48.482V480.654z M322.887,480.654h-48.481v-9.562h48.481V480.654z M419.852,480.654h-48.482 v-9.562h48.482V480.654z M471.211,480.654c-0.01,0-0.02,0-0.02,0h-2.85v-9.562h2.85c0,0,0.01,0,0.02,0 c15.512,0,29.787-4.754,39.188-13.045l6.32,7.172C505.598,475.021,489.008,480.654,471.211,480.654z M491.857,376.471 c13.416,10.758,24.957,24.977,31.67,39.023l-8.625,4.121c-6.109-12.785-16.686-25.789-29.012-35.678L491.857,376.471z M418.398,316.656c9.59,13.934,21.113,25.705,32.445,33.145l-5.25,7.994c-12.346-8.109-24.805-20.789-35.076-35.707 L418.398,316.656z M380.357,228.204c9.324,13.846,16.361,30.705,19.316,46.244l-9.391,1.789 c-2.725-14.325-9.227-29.883-17.852-42.688L380.357,228.204z M299.326,205.464c9.008-7.344,24.604-10.041,39.941-6.971 l-1.873,9.381c-12.441-2.486-25.312-0.478-32.025,5.011c-2.295,1.865-4.762,4.236-7.354,7.067l-7.057-6.464 C293.865,210.312,296.676,207.615,299.326,205.464z M292.164,263.747c4.656-11.867,16.715-29.051,25.291-36.05 c0.613-0.469,3.586-1.798,9.076-1.798c5.861,0,11.98,1.521,16.781,4.188c8.721,4.829,24.078,26.861,28.314,50.422 c6.168,34.281,34.178,74.846,65.16,94.363l29.92,18.838c20.598,12.967,34.254,35.84,34.254,45.27 c0,3.338-10.242,12.994-29.777,12.994H155.85c-22.912,0-56.428-14.955-71.728-31.996l-6.589-7.344 c-15.835-17.652-29.729-53.932-29.729-77.656V153.826c0-25.446,11.322-48.721,17.49-52.909c2.897-1.97,8.826-4.074,16.782-4.074 c6.531,0,12.794,1.435,17.184,3.949c7.669,4.38,19.259,26.88,19.259,50.806v96.161c0,36.567,15.807,78.728,36.768,98.073 c10.681,9.859,24.681,15.291,39.445,15.291c20.177,0,39.665-9.744,53.464-26.719C265.818,312.727,285.125,281.695,292.164,263.747 z M264.46,255.686l8.778,3.796c-4.781,11.025-14.066,26.977-24.862,42.658l-7.879-5.422 C250.805,281.754,259.995,266.033,264.46,255.686z M170.939,320.711c1.243,1.492,2.515,2.84,3.806,4.035 c8.893,8.195,22.166,9.906,34.396,4.562l3.825,8.768c-5.948,2.592-12.087,3.912-18.236,3.912c-10.079,0-19.23-3.529-26.469-10.213 c-1.587-1.463-3.146-3.117-4.667-4.936L170.939,320.711z'/%3E%3C/svg%3E"); /* Job tag glyphs — referenced by JOB_TAG.Icon (the row stores the name only) */ --hc-icon-helmet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='164 5399 20 20'%3E%3Cpath fill-rule='evenodd' d='M182,5414.833 C182,5415.979 181.062,5417 179.917,5417 L168.018,5417 L167.852,5417 C166.829,5417 166,5416.087 166,5415.065 L166,5413 L173.558,5413 C174.419,5413 175.184,5412.407 175.456,5411.59 L176.123,5409.611 C176.554,5408.316 175.59,5407 174.225,5407 L166.367,5407 C167.319,5404 170.049,5401.329 173.452,5401.101 C178.11,5400.789 182,5404.407 182,5409 L182,5414.833 Z M182,5403.018 C181.426,5402.252 180.747,5401.573 179.982,5401 C178.312,5399.749 176.246,5399 174,5399 C171.754,5399 169.688,5399.749 168.018,5401 C167.253,5401.573 166.574,5402.252 166,5403.018 C164.75,5404.687 164,5406.753 164,5409 L164,5414.833 C164,5417.042 165.791,5419 168,5419 L174,5419 L180,5419 C182.209,5419 184,5417.042 184,5414.833 L184,5409 C184,5406.753 183.25,5404.687 182,5403.018 L182,5403.018 Z'/%3E%3C/svg%3E"); --hc-icon-headset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9z'/%3E%3C/svg%3E"); --hc-icon-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E"); } .hc-icon { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: middle; background-color: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; } .hc-icon--check { -webkit-mask-image: var(--hc-icon-check); mask-image: var(--hc-icon-check); } .hc-icon--plus { -webkit-mask-image: var(--hc-icon-plus); mask-image: var(--hc-icon-plus); } .hc-icon--x { -webkit-mask-image: var(--hc-icon-x); mask-image: var(--hc-icon-x); } .hc-icon--lock { -webkit-mask-image: var(--hc-icon-lock); mask-image: var(--hc-icon-lock); } .hc-icon--chevron-up { -webkit-mask-image: var(--hc-icon-chevron-up); mask-image: var(--hc-icon-chevron-up); } .hc-icon--chevron-down { -webkit-mask-image: var(--hc-icon-chevron-down); mask-image: var(--hc-icon-chevron-down); } .hc-icon--chevron-left { -webkit-mask-image: var(--hc-icon-chevron-left); mask-image: var(--hc-icon-chevron-left); } .hc-icon--chevron-right{ -webkit-mask-image: var(--hc-icon-chevron-right);mask-image: var(--hc-icon-chevron-right); } .hc-icon--panel { -webkit-mask-image: var(--hc-icon-panel); mask-image: var(--hc-icon-panel); } .hc-icon--help { -webkit-mask-image: var(--hc-icon-help); mask-image: var(--hc-icon-help); } .hc-icon--mail { -webkit-mask-image: var(--hc-icon-mail); mask-image: var(--hc-icon-mail); } .hc-icon--user { -webkit-mask-image: var(--hc-icon-user); mask-image: var(--hc-icon-user); } .hc-icon--arrow-right { -webkit-mask-image: var(--hc-icon-arrow-right); mask-image: var(--hc-icon-arrow-right); } .hc-icon--palette { -webkit-mask-image: var(--hc-icon-palette); mask-image: var(--hc-icon-palette); } .hc-icon--flag { -webkit-mask-image: var(--hc-icon-flag); mask-image: var(--hc-icon-flag); } .hc-icon--plane { -webkit-mask-image: var(--hc-icon-plane); mask-image: var(--hc-icon-plane); } .hc-icon--flask { -webkit-mask-image: var(--hc-icon-flask); mask-image: var(--hc-icon-flask); } .hc-icon--gauge { -webkit-mask-image: var(--hc-icon-gauge); mask-image: var(--hc-icon-gauge); } .hc-icon--monitor { -webkit-mask-image: var(--hc-icon-monitor); mask-image: var(--hc-icon-monitor); } .hc-icon--circuit { -webkit-mask-image: var(--hc-icon-circuit); mask-image: var(--hc-icon-circuit); } .hc-icon--helmet { -webkit-mask-image: var(--hc-icon-helmet); mask-image: var(--hc-icon-helmet); } .hc-icon--headset { -webkit-mask-image: var(--hc-icon-headset); mask-image: var(--hc-icon-headset); } .hc-icon--wrench { -webkit-mask-image: var(--hc-icon-wrench); mask-image: var(--hc-icon-wrench); }