/* Real generated PNG alpha, tinted by the control's current ink for selected/dark states. */
.ui-icon { position: relative; display: inline-block; width: 28px; height: 28px; flex: 0 0 auto; color: inherit; pointer-events: none; }
body .ui-icon > svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
body .ui-icon > img { display: none; }
@supports (mask-image: url('')) or (-webkit-mask-image: url('')) {
  .ui-icon.image-ready::after {
    content: ''; position: absolute; width: var(--icon-width, 100%); height: var(--icon-height, 100%);
    left: var(--icon-left, 0%); top: var(--icon-top, 0%); background: currentColor;
    mask: var(--icon-art) center / 100% 100% no-repeat;
    -webkit-mask: var(--icon-art) center / 100% 100% no-repeat;
  }
  body .ui-icon.image-ready > svg { display: none; }
}
#settings-drawer button > .ui-icon, #settings-drawer button > .ui-position,
#action-menu[data-surface="game"] button > .ui-icon { width: 64%; height: 64%; }
#action-menu[data-surface="widget"] button > .ui-icon, .radial-btn > .ui-icon { width: 30px; height: 30px; }
#menu-position-buttons .ui-position { width: 30px; height: 30px; }
.ui-position { position: relative; display: inline-block; pointer-events: none; --position-x: 50%; --position-y: 50%; }
.ui-position > .ui-icon { width: 100%; height: 100%; }
.ui-position > i { position: absolute; left: var(--position-x); top: var(--position-y); width: 14%; height: 14%; transform: translate(-50%, -50%); border-radius: 1px; background: currentColor; }
.ui-position--left, .ui-position--top-left, .ui-position--bottom-left { --position-x: 26%; }
.ui-position--right, .ui-position--top-right, .ui-position--bottom-right { --position-x: 74%; }
.ui-position--top, .ui-position--top-left, .ui-position--top-right { --position-y: 26%; }
.ui-position--bottom, .ui-position--bottom-left, .ui-position--bottom-right { --position-y: 74%; }
.dialog-x { display: grid; place-items: center; }
.lighting-presets .ui-icon { width: 26px; height: 26px; }
.icon-control { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
@media (forced-colors: active) {
  body .ui-icon.image-ready > svg { display: block; }
  .ui-icon.image-ready::after { display: none; }
  .ui-position > i { forced-color-adjust: none; background: currentColor; }
}

:is(#settings-drawer, #action-menu, #menu-position-buttons, .radial-menu-root) .ui-icon > svg { width: 100%; height: 100%; }