/** ICON COMPONENT (CT21, run 21b) **/
/* The wrapper is a flex row, so the icon follows the column alignment
   (--sc-flow-just, base.css) or, behind "Uitlijning afwijkend", its own
   (.ic-al-*). Icon vars (patched live): --sc-ic-size and
   its band twins -d | -t | -tp | -m, each falling back to the general value.
   A state (ic_size__h …) writes width/height on .sc-ic from the node's own
   <style data-sc-ov>, so it wins over these rules without !important. */
.component.component-icon {
    display: flex;
    justify-content: var(--sc-flow-just, flex-start);
}
.component-icon.ic-al-left { justify-content: flex-start; }
.component-icon.ic-al-center { justify-content: center; }
.component-icon.ic-al-right { justify-content: flex-end; }

/* Block-level (not inline-flex): inside a box the icon must not sit on a line
   box, whose strut would add height under a small icon. */
.sc-ic {
    display: flex;
    flex: none;
    width: var(--sc-ic-size, 32px);
    height: var(--sc-ic-size, 32px);
}
@media screen and (min-width: 1025px) {
    .sc-ic { width: var(--sc-ic-size-d, var(--sc-ic-size, 32px)); height: var(--sc-ic-size-d, var(--sc-ic-size, 32px)); }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .sc-ic { width: var(--sc-ic-size-t, var(--sc-ic-size, 32px)); height: var(--sc-ic-size-t, var(--sc-ic-size, 32px)); }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
    .sc-ic { width: var(--sc-ic-size-tp, var(--sc-ic-size, 32px)); height: var(--sc-ic-size-tp, var(--sc-ic-size, 32px)); }
}
@media screen and (max-width: 480px) {
    .sc-ic { width: var(--sc-ic-size-m, var(--sc-ic-size, 32px)); height: var(--sc-ic-size-m, var(--sc-ic-size, 32px)); }
}

/* siteclick_get_icon_svg() puts .siteclick-icon on the <svg>, which base.css
   sizes with `1em !important`; the icon fills its square instead. */
.sc-ic > svg.siteclick-icon {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Run 22b (r.97-99): the optional block around the icon (span.sc-icb). Size and
   the icon position are inline vars (empty = as large as the icon, centred);
   ranges and states write width/height/place-items from the node's own
   <style data-sc-ov>. The rotation is its own var, outside .sc-rot. */
.sc-icb {
    display: grid;
    place-items: var(--sc-icb-pi, center);
    flex: none;
    box-sizing: border-box;
    position: relative;
    width: var(--sc-icb-w, auto);
    height: var(--sc-icb-h, auto);
    rotate: var(--sc-icb-rot, 0deg);
}