@itwin/itwinui-react 3.0.5 → 3.0.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 3.0.6
+
+### Patch Changes
+
+- [#1693](https://github.com/iTwin/iTwinUI/pull/1693): Fixed an issue where Dialog content was appearing blurred on Windows.
+
 ## 3.0.5
 
 ### Patch Changes

package/cjs/core/Dialog/DialogMain.js

@@ -38,7 +38,7 @@ exports.DialogMain = React.forwardRef((props, ref) => {
     const { className, children, styleType = 'default', isOpen = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnEsc = dialogContext.closeOnEsc, trapFocus = dialogContext.trapFocus, setFocus = dialogContext.setFocus, preventDocumentScroll = dialogContext.preventDocumentScroll, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, placement = dialogContext.placement, ...rest } = props;
     const [style, setStyle] = React.useState();
     const dialogRef = React.useRef(null);
-    const refs = (0, index_js_1.useMergedRefs)(dialogRef, ref);
+    const [dialogElement, setDialogElement] = React.useState();
     const hasBeenResized = React.useRef(false);
     const previousFocusedElement = React.useRef();
     const originalBodyOverflow = React.useRef('');
@@ -90,7 +90,7 @@ exports.DialogMain = React.forwardRef((props, ref) => {
             return;
         }
         const rect = dialogRef.current?.getBoundingClientRect();
-        const [translateX, translateY] = (0, index_js_1.getTranslateValues)(dialogRef.current);
+        const [translateX, translateY] = (0, index_js_1.getTranslateValuesFromElement)(dialogRef.current);
         setStyle((oldStyle) => ({
             ...oldStyle,
             inlineSize: rect?.width,
@@ -106,13 +106,17 @@ exports.DialogMain = React.forwardRef((props, ref) => {
             ...newStyle,
         }));
     }, []);
+    const roundedTransform = useRoundedTransform({
+        element: dialogElement,
+        transform,
+    });
     const content = (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog', {
             'iui-dialog-default': styleType === 'default',
             'iui-dialog-full-page': styleType === 'fullPage',
             'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
-        }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
-            transform,
+        }, className), role: 'dialog', ref: (0, index_js_1.useMergedRefs)(dialogRef, ref, setDialogElement), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
+            transform: roundedTransform,
             ...style,
             ...propStyle,
         }, ...rest },
@@ -144,3 +148,20 @@ exports.DialogMain = React.forwardRef((props, ref) => {
             !trapFocus && content)));
 });
 exports.default = exports.DialogMain;
+// ----------------------------------------------------------------------------
+/**
+ * Rounds off an element's transform value based on the device's pixel grid, to avoid blurring.
+ */
+const useRoundedTransform = ({ element, transform, }) => {
+    const [roundedStyles, setRoundedStyles] = React.useState(transform);
+    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+        if (!element || typeof DOMMatrix === 'undefined') {
+            return;
+        }
+        const [x, y] = transform
+            ? (0, index_js_1.getTranslateValues)(transform)
+            : (0, index_js_1.getTranslateValuesFromElement)(element);
+        setRoundedStyles(`translate(${(0, index_js_1.roundByDPR)(x)}px, ${(0, index_js_1.roundByDPR)(y)}px)`);
+    }, [element, transform]);
+    return roundedStyles;
+};

package/cjs/core/utils/components/Resizer.js

@@ -29,7 +29,7 @@ const Resizer = (props) => {
         }
         const initialPointerX = event.clientX;
         const initialPointerY = event.clientY;
-        const [initialTranslateX, initialTranslateY] = (0, index_js_1.getTranslateValues)(elementRef.current);
+        const [initialTranslateX, initialTranslateY] = (0, index_js_1.getTranslateValuesFromElement)(elementRef.current);
         const { width: initialWidth, height: initialHeight } = elementRef.current.getBoundingClientRect();
         let width = `${initialWidth}px`;
         let height = `${initialHeight}px`;

package/cjs/core/utils/functions/dom.d.ts

@@ -19,4 +19,5 @@ export declare const mergeEventHandlers: <E extends import("react").SyntheticEve
  * @param element HTML element you want to get translate value of
  * @returns Translate values in pixels in an array `[translateX, translateY]`
  */
-export declare const getTranslateValues: (element: HTMLElement | null | undefined) => number[];
+export declare const getTranslateValuesFromElement: (element: HTMLElement | null | undefined) => number[];
+export declare const getTranslateValues: (transformValue: string) => number[];

package/cjs/core/utils/functions/dom.js

@@ -4,7 +4,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTranslateValues = exports.mergeEventHandlers = exports.getWindow = exports.getDocument = void 0;
+exports.getTranslateValues = exports.getTranslateValuesFromElement = exports.mergeEventHandlers = exports.getWindow = exports.getDocument = void 0;
 /**
  * Get document if it is defined.
  * Used to support SSR/SSG applications.
@@ -39,11 +39,15 @@ exports.mergeEventHandlers = mergeEventHandlers;
  * @param element HTML element you want to get translate value of
  * @returns Translate values in pixels in an array `[translateX, translateY]`
  */
-const getTranslateValues = (element) => {
+const getTranslateValuesFromElement = (element) => {
     if (!element) {
         return [];
     }
     const transformValue = getComputedStyle(element).getPropertyValue('transform');
+    return (0, exports.getTranslateValues)(transformValue);
+};
+exports.getTranslateValuesFromElement = getTranslateValuesFromElement;
+const getTranslateValues = (transformValue) => {
     const matrix = new DOMMatrix(transformValue);
     return [matrix.m41, matrix.m42];
 };

package/cjs/core/utils/functions/numbers.d.ts

@@ -6,3 +6,10 @@ export declare const getBoundedValue: (val: number, min: number, max: number) =>
  * Returns a random value of a given length containing `A-Za-z0-9_-` symbols.
  */
 export declare const getRandomValue: (length?: number) => string;
+/**
+ * Rounds a pixel value based on the device's pixel ratio. This ensures that values can be
+ * placed evenly on the device’s pixel grid, avoiding any blurring.
+ *
+ * @see https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning
+ */
+export declare const roundByDPR: (value: number) => number;

package/cjs/core/utils/functions/numbers.js

@@ -4,7 +4,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRandomValue = exports.getBoundedValue = void 0;
+exports.roundByDPR = exports.getRandomValue = exports.getBoundedValue = void 0;
 /**
  * Return input value bounded by specified range.
  */
@@ -24,3 +24,14 @@ const getRandomValue = (length = 21) => {
     return id;
 };
 exports.getRandomValue = getRandomValue;
+/**
+ * Rounds a pixel value based on the device's pixel ratio. This ensures that values can be
+ * placed evenly on the device’s pixel grid, avoiding any blurring.
+ *
+ * @see https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning
+ */
+const roundByDPR = (value) => {
+    const dpr = window.devicePixelRatio || 1;
+    return Math.round(value * dpr) / dpr;
+};
+exports.roundByDPR = roundByDPR;

package/cjs/core/utils/hooks/useDragAndDrop.js

@@ -38,7 +38,7 @@ const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
             return;
         }
         const { top, right, bottom, left } = elementRef.current?.getBoundingClientRect();
-        let [newTranslateX, newTranslateY] = (0, index_js_1.getTranslateValues)(elementRef.current);
+        let [newTranslateX, newTranslateY] = (0, index_js_1.getTranslateValuesFromElement)(elementRef.current);
         containerRectRef.current = getContainerRect(containerRef);
         if (bottom > containerRectRef.current.bottom) {
             newTranslateY -= bottom - containerRectRef.current.bottom;
@@ -84,7 +84,7 @@ const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
         if (!elementRef.current || e.button !== 0 || !enabled) {
             return;
         }
-        const [x, y] = (0, index_js_1.getTranslateValues)(elementRef.current);
+        const [x, y] = (0, index_js_1.getTranslateValuesFromElement)(elementRef.current);
         grabOffsetX.current = e.clientX - x;
         grabOffsetY.current = e.clientY - y;
         originalUserSelect.current = elementRef.current.style.userSelect;

package/cjs/styles.js

@@ -208,9 +208,9 @@ const styles = {
   "iui-overlay-exiting": "_iui3-overlay-exiting",
   closeAnimation,
   "iui-progress-indicator-radial": "_iui3-progress-indicator-radial",
-  "iui-uioihru": "_iui3-uioihru",
+  "iui-uj58gze": "_iui3-uj58gze",
   "iui-progress-indicator-linear-label": "_iui3-progress-indicator-linear-label",
-  "iui-uioihsj": "_iui3-uioihsj",
+  "iui-uj58gzs": "_iui3-uj58gzs",
   "iui-radio": "_iui3-radio",
   "iui-radio-tile": "_iui3-radio-tile",
   "iui-radio-tile-icon": "_iui3-radio-tile-icon",

package/esm/core/Dialog/DialogMain.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { FocusTrap, getTranslateValues, Resizer, useMergedRefs, useIsomorphicLayoutEffect, Box, } from '../utils/index.js';
+import { FocusTrap, getTranslateValuesFromElement, Resizer, useMergedRefs, useIsomorphicLayoutEffect, Box, getTranslateValues, roundByDPR, } from '../utils/index.js';
 import { useDialogContext } from './DialogContext.js';
 import { CSSTransition } from 'react-transition-group';
 import { DialogDragContext } from './DialogDragContext.js';
@@ -34,7 +34,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
     const { className, children, styleType = 'default', isOpen = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnEsc = dialogContext.closeOnEsc, trapFocus = dialogContext.trapFocus, setFocus = dialogContext.setFocus, preventDocumentScroll = dialogContext.preventDocumentScroll, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, placement = dialogContext.placement, ...rest } = props;
     const [style, setStyle] = React.useState();
     const dialogRef = React.useRef(null);
-    const refs = useMergedRefs(dialogRef, ref);
+    const [dialogElement, setDialogElement] = React.useState();
     const hasBeenResized = React.useRef(false);
     const previousFocusedElement = React.useRef();
     const originalBodyOverflow = React.useRef('');
@@ -86,7 +86,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
             return;
         }
         const rect = dialogRef.current?.getBoundingClientRect();
-        const [translateX, translateY] = getTranslateValues(dialogRef.current);
+        const [translateX, translateY] = getTranslateValuesFromElement(dialogRef.current);
         setStyle((oldStyle) => ({
             ...oldStyle,
             inlineSize: rect?.width,
@@ -102,13 +102,17 @@ export const DialogMain = React.forwardRef((props, ref) => {
             ...newStyle,
         }));
     }, []);
+    const roundedTransform = useRoundedTransform({
+        element: dialogElement,
+        transform,
+    });
     const content = (React.createElement(Box, { className: cx('iui-dialog', {
             'iui-dialog-default': styleType === 'default',
             'iui-dialog-full-page': styleType === 'fullPage',
             'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
-        }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
-            transform,
+        }, className), role: 'dialog', ref: useMergedRefs(dialogRef, ref, setDialogElement), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
+            transform: roundedTransform,
             ...style,
             ...propStyle,
         }, ...rest },
@@ -140,3 +144,20 @@ export const DialogMain = React.forwardRef((props, ref) => {
             !trapFocus && content)));
 });
 export default DialogMain;
+// ----------------------------------------------------------------------------
+/**
+ * Rounds off an element's transform value based on the device's pixel grid, to avoid blurring.
+ */
+const useRoundedTransform = ({ element, transform, }) => {
+    const [roundedStyles, setRoundedStyles] = React.useState(transform);
+    useIsomorphicLayoutEffect(() => {
+        if (!element || typeof DOMMatrix === 'undefined') {
+            return;
+        }
+        const [x, y] = transform
+            ? getTranslateValues(transform)
+            : getTranslateValuesFromElement(element);
+        setRoundedStyles(`translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`);
+    }, [element, transform]);
+    return roundedStyles;
+};

package/esm/core/utils/components/Resizer.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { getBoundedValue, getTranslateValues } from '../functions/index.js';
+import { getBoundedValue, getTranslateValuesFromElement, } from '../functions/index.js';
 /**
  * Component that allows to resize parent element.
  * Parent must have `position: relative`.
@@ -25,7 +25,7 @@ export const Resizer = (props) => {
         }
         const initialPointerX = event.clientX;
         const initialPointerY = event.clientY;
-        const [initialTranslateX, initialTranslateY] = getTranslateValues(elementRef.current);
+        const [initialTranslateX, initialTranslateY] = getTranslateValuesFromElement(elementRef.current);
         const { width: initialWidth, height: initialHeight } = elementRef.current.getBoundingClientRect();
         let width = `${initialWidth}px`;
         let height = `${initialHeight}px`;

package/esm/core/utils/functions/dom.d.ts

@@ -19,4 +19,5 @@ export declare const mergeEventHandlers: <E extends import("react").SyntheticEve
  * @param element HTML element you want to get translate value of
  * @returns Translate values in pixels in an array `[translateX, translateY]`
  */
-export declare const getTranslateValues: (element: HTMLElement | null | undefined) => number[];
+export declare const getTranslateValuesFromElement: (element: HTMLElement | null | undefined) => number[];
+export declare const getTranslateValues: (transformValue: string) => number[];

package/esm/core/utils/functions/dom.js

@@ -33,11 +33,14 @@ export const mergeEventHandlers = (...callbacks) => (event) => {
  * @param element HTML element you want to get translate value of
  * @returns Translate values in pixels in an array `[translateX, translateY]`
  */
-export const getTranslateValues = (element) => {
+export const getTranslateValuesFromElement = (element) => {
     if (!element) {
         return [];
     }
     const transformValue = getComputedStyle(element).getPropertyValue('transform');
+    return getTranslateValues(transformValue);
+};
+export const getTranslateValues = (transformValue) => {
     const matrix = new DOMMatrix(transformValue);
     return [matrix.m41, matrix.m42];
 };

package/esm/core/utils/functions/numbers.d.ts

@@ -6,3 +6,10 @@ export declare const getBoundedValue: (val: number, min: number, max: number) =>
  * Returns a random value of a given length containing `A-Za-z0-9_-` symbols.
  */
 export declare const getRandomValue: (length?: number) => string;
+/**
+ * Rounds a pixel value based on the device's pixel ratio. This ensures that values can be
+ * placed evenly on the device’s pixel grid, avoiding any blurring.
+ *
+ * @see https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning
+ */
+export declare const roundByDPR: (value: number) => number;

package/esm/core/utils/functions/numbers.js

@@ -19,3 +19,13 @@ export const getRandomValue = (length = 21) => {
     }
     return id;
 };
+/**
+ * Rounds a pixel value based on the device's pixel ratio. This ensures that values can be
+ * placed evenly on the device’s pixel grid, avoiding any blurring.
+ *
+ * @see https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning
+ */
+export const roundByDPR = (value) => {
+    const dpr = window.devicePixelRatio || 1;
+    return Math.round(value * dpr) / dpr;
+};

package/esm/core/utils/hooks/useDragAndDrop.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { getTranslateValues, getWindow } from '../functions/index.js';
+import { getTranslateValuesFromElement, getWindow, } from '../functions/index.js';
 import { useEventListener } from './useEventListener.js';
 import { useResizeObserver } from './useResizeObserver.js';
 const getContainerRect = (containerRef) => {
@@ -34,7 +34,7 @@ export const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
             return;
         }
         const { top, right, bottom, left } = elementRef.current?.getBoundingClientRect();
-        let [newTranslateX, newTranslateY] = getTranslateValues(elementRef.current);
+        let [newTranslateX, newTranslateY] = getTranslateValuesFromElement(elementRef.current);
         containerRectRef.current = getContainerRect(containerRef);
         if (bottom > containerRectRef.current.bottom) {
             newTranslateY -= bottom - containerRectRef.current.bottom;
@@ -80,7 +80,7 @@ export const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
         if (!elementRef.current || e.button !== 0 || !enabled) {
             return;
         }
-        const [x, y] = getTranslateValues(elementRef.current);
+        const [x, y] = getTranslateValuesFromElement(elementRef.current);
         grabOffsetX.current = e.clientX - x;
         grabOffsetY.current = e.clientY - y;
         originalUserSelect.current = elementRef.current.style.userSelect;

package/esm/styles.js

@@ -207,9 +207,9 @@ const styles = {
   "iui-overlay-exiting": "_iui3-overlay-exiting",
   closeAnimation,
   "iui-progress-indicator-radial": "_iui3-progress-indicator-radial",
-  "iui-uioihru": "_iui3-uioihru",
+  "iui-uj58gze": "_iui3-uj58gze",
   "iui-progress-indicator-linear-label": "_iui3-progress-indicator-linear-label",
-  "iui-uioihsj": "_iui3-uioihsj",
+  "iui-uj58gzs": "_iui3-uj58gzs",
   "iui-radio": "_iui3-radio",
   "iui-radio-tile": "_iui3-radio-tile",
   "iui-radio-tile-icon": "_iui3-radio-tile-icon",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",

package/styles.css

@@ -694,14 +694,14 @@
 }
 
 @layer itwinui.v3{
-._iui3-progress-indicator-radial :is(svg,img){inline-size:var(--iui-size-m);block-size:var(--iui-size-m);fill:var(--iui-color-icon);flex-shrink:0;display:flex}._iui3-progress-indicator-radial[data-iui-status=positive]{color:var(--iui-color-text-positive)}._iui3-progress-indicator-radial[data-iui-status=positive]:after{background-color:var(--iui-color-border-positive)}._iui3-progress-indicator-radial[data-iui-status=positive] :is(svg,img){fill:var(--iui-color-border-positive)}._iui3-progress-indicator-radial[data-iui-status=negative]{color:var(--iui-color-text-negative)}._iui3-progress-indicator-radial[data-iui-status=negative]:after{background-color:var(--iui-color-border-negative)}._iui3-progress-indicator-radial[data-iui-status=negative] :is(svg,img){fill:var(--iui-color-border-negative)}._iui3-progress-indicator-radial[data-iui-size=x-small]{--_iui-progress-indicator-radial-size:var(--iui-size-m)}._iui3-progress-indicator-radial[data-iui-size=x-small]:before,._iui3-progress-indicator-radial[data-iui-size=x-small]:after{border-width:var(--iui-size-3xs)}._iui3-progress-indicator-radial[data-iui-size=x-small]>*{display:none}._iui3-progress-indicator-radial[data-iui-size=small]{--_iui-progress-indicator-radial-size:calc(1.5*var(--iui-size-m))}._iui3-progress-indicator-radial[data-iui-size=small]:before,._iui3-progress-indicator-radial[data-iui-size=small]:after{border-width:calc(var(--iui-size-3xs)*1.5)}._iui3-progress-indicator-radial[data-iui-size=large]{--_iui-progress-indicator-radial-size:calc(3*var(--iui-size-m));font-size:var(--iui-font-size-2)}._iui3-progress-indicator-radial[data-iui-size=large]:before,._iui3-progress-indicator-radial[data-iui-size=large]:after{border-width:calc(var(--iui-size-2xs)*1.5)}._iui3-progress-indicator-radial[data-iui-size=large] :is(svg,img){inline-size:calc(1.5*var(--iui-size-m));block-size:calc(1.5*var(--iui-size-m));flex-shrink:0;display:flex}._iui3-progress-indicator-radial:where(:not([data-iui-indeterminate=true])):after{-webkit-mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0);mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0)}._iui3-progress-indicator-radial:where([data-iui-indeterminate=true]):after{animation:.8s cubic-bezier(.6,.4,.4,.6) infinite _iui3-uioihru;-webkit-mask-image:conic-gradient(#0000,#000),linear-gradient(#000 0 0);mask-image:conic-gradient(#0000,#000),linear-gradient(#000 0 0)}@keyframes _iui3-uioihru{to{transform:rotate(360deg)}}._iui3-progress-indicator-linear-label{font-size:var(--iui-font-size-0);color:var(--_iui-progress-indicator-linear-label-color);--iui-svg-fill:var(--_iui-progress-indicator-linear-label-fill);justify-content:space-between;align-items:center;display:flex}._iui3-progress-indicator-linear-label>:only-child{margin-inline:auto}._iui3-progress-indicator-linear{gap:var(--iui-size-2xs);display:grid}._iui3-progress-indicator-linear:before{content:"";block-size:var(--iui-size-2xs);background-color:var(--iui-color-border);background-image:linear-gradient(90deg,var(--_iui-progress-indicator-track-fill,var(--iui-color-border-accent))0% 100%);background-repeat:no-repeat;background-size:var(--iui-progress-percentage,100%)100%;forced-color-adjust:none}
+._iui3-progress-indicator-radial :is(svg,img){inline-size:var(--iui-size-m);block-size:var(--iui-size-m);fill:var(--iui-color-icon);flex-shrink:0;display:flex}._iui3-progress-indicator-radial[data-iui-status=positive]{color:var(--iui-color-text-positive)}._iui3-progress-indicator-radial[data-iui-status=positive]:after{background-color:var(--iui-color-border-positive)}._iui3-progress-indicator-radial[data-iui-status=positive] :is(svg,img){fill:var(--iui-color-border-positive)}._iui3-progress-indicator-radial[data-iui-status=negative]{color:var(--iui-color-text-negative)}._iui3-progress-indicator-radial[data-iui-status=negative]:after{background-color:var(--iui-color-border-negative)}._iui3-progress-indicator-radial[data-iui-status=negative] :is(svg,img){fill:var(--iui-color-border-negative)}._iui3-progress-indicator-radial[data-iui-size=x-small]{--_iui-progress-indicator-radial-size:var(--iui-size-m)}._iui3-progress-indicator-radial[data-iui-size=x-small]:before,._iui3-progress-indicator-radial[data-iui-size=x-small]:after{border-width:var(--iui-size-3xs)}._iui3-progress-indicator-radial[data-iui-size=x-small]>*{display:none}._iui3-progress-indicator-radial[data-iui-size=small]{--_iui-progress-indicator-radial-size:calc(1.5*var(--iui-size-m))}._iui3-progress-indicator-radial[data-iui-size=small]:before,._iui3-progress-indicator-radial[data-iui-size=small]:after{border-width:calc(var(--iui-size-3xs)*1.5)}._iui3-progress-indicator-radial[data-iui-size=large]{--_iui-progress-indicator-radial-size:calc(3*var(--iui-size-m));font-size:var(--iui-font-size-2)}._iui3-progress-indicator-radial[data-iui-size=large]:before,._iui3-progress-indicator-radial[data-iui-size=large]:after{border-width:calc(var(--iui-size-2xs)*1.5)}._iui3-progress-indicator-radial[data-iui-size=large] :is(svg,img){inline-size:calc(1.5*var(--iui-size-m));block-size:calc(1.5*var(--iui-size-m));flex-shrink:0;display:flex}._iui3-progress-indicator-radial:where(:not([data-iui-indeterminate=true])):after{-webkit-mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0);mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0)}._iui3-progress-indicator-radial:where([data-iui-indeterminate=true]):after{animation:.8s cubic-bezier(.6,.4,.4,.6) infinite _iui3-uj58gze;-webkit-mask-image:conic-gradient(#0000,#000),linear-gradient(#000 0 0);mask-image:conic-gradient(#0000,#000),linear-gradient(#000 0 0)}@keyframes _iui3-uj58gze{to{transform:rotate(360deg)}}._iui3-progress-indicator-linear-label{font-size:var(--iui-font-size-0);color:var(--_iui-progress-indicator-linear-label-color);--iui-svg-fill:var(--_iui-progress-indicator-linear-label-fill);justify-content:space-between;align-items:center;display:flex}._iui3-progress-indicator-linear-label>:only-child{margin-inline:auto}._iui3-progress-indicator-linear{gap:var(--iui-size-2xs);display:grid}._iui3-progress-indicator-linear:before{content:"";block-size:var(--iui-size-2xs);background-color:var(--iui-color-border);background-image:linear-gradient(90deg,var(--_iui-progress-indicator-track-fill,var(--iui-color-border-accent))0% 100%);background-repeat:no-repeat;background-size:var(--iui-progress-percentage,100%)100%;forced-color-adjust:none}
 }
 
 @layer itwinui.v3{@media (forced-colors:active){._iui3-progress-indicator-linear:before{background-color:#0000;background-image:linear-gradient(90deg,CanvasText 0% 100%);border:.5px solid}}
 }
 
 @layer itwinui.v3{
-._iui3-progress-indicator-linear[data-iui-status=positive]{--_iui-progress-indicator-track-fill:var(--iui-color-border-positive);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-positive);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-positive)}._iui3-progress-indicator-linear[data-iui-status=positive]::selection,._iui3-progress-indicator-linear[data-iui-status=positive] ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}._iui3-progress-indicator-linear[data-iui-status=negative]{--_iui-progress-indicator-track-fill:var(--iui-color-border-negative);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-negative);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-negative)}._iui3-progress-indicator-linear[data-iui-status=negative]::selection,._iui3-progress-indicator-linear[data-iui-status=negative] ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}._iui3-progress-indicator-linear:where([data-iui-animated=true]:not([data-iui-indeterminate=true])):before{transition:background-size 1s ease-in-out}._iui3-progress-indicator-linear:where([data-iui-indeterminate=true]):before{animation:1.5s linear infinite _iui3-uioihsj}@keyframes _iui3-uioihsj{0%{background-position:-60% 0;background-size:30% 100%}40%{background-position:-40% 0;background-size:40% 100%}to{background-position:200% 0;background-size:50% 100%}}._iui3-radio-wrapper{vertical-align:baseline;font-size:var(--iui-font-size-1);-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--iui-color-text);align-items:center;gap:var(--iui-size-xs);border:none;inline-size:-moz-fit-content;inline-size:fit-content;margin:0;padding:0;display:flex;position:relative}._iui3-radio-wrapper._iui3-loading{cursor:progress;color:var(--iui-color-text-disabled);font-style:italic}._iui3-radio-wrapper>._iui3-checkbox-label,._iui3-radio-wrapper>._iui3-radio-label{line-height:var(--iui-size-l)}._iui3-radio-wrapper>._iui3-checkbox-label svg,._iui3-radio-wrapper>._iui3-radio-label svg{inline-size:var(--iui-size-m);block-size:var(--iui-size-m);vertical-align:middle;fill:var(--iui-color-icon);flex-shrink:0;display:flex}._iui3-radio-wrapper._iui3-disabled{cursor:not-allowed;color:var(--iui-color-text-disabled)}._iui3-radio-wrapper._iui3-disabled svg{fill:var(--iui-color-icon-disabled)}._iui3-radio-wrapper._iui3-positive{color:var(--iui-color-text-positive)}._iui3-radio-wrapper._iui3-warning{color:var(--iui-color-text-warning)}._iui3-radio-wrapper._iui3-negative{color:var(--iui-color-text-negative)}._iui3-radio{--_iui-checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z\" /></svg>");--_iui-checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m2.75 6.875h10.5v2.25h-10.5z\" /></svg>");--_iui-checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 16 16\"></svg>");--_iui-checkbox-svg-color:var(--iui-color-icon-accent);--_iui-checkbox-border-color:var(--iui-color-border-foreground);--_iui-checkbox-background-color:var(--iui-color-background);--_iui-checkbox-mask-image:initial;inline-size:var(--iui-size-m);block-size:var(--iui-size-m);appearance:none;border-radius:var(--iui-border-radius-1);background-color:var(--_iui-checkbox-background-color);cursor:pointer;transition:outline-color var(--iui-duration-1)ease-out;outline:solid 1px var(--_iui-checkbox-border-color);outline-offset:-1px;border-radius:50%;flex-shrink:0;margin:0;display:flex;position:relative}._iui3-radio:before{content:"";inset:calc((var(--iui-checkbox-target-size,24px) - 16px)/-2);position:absolute}._iui3-radio:after{content:"";background-color:var(--_iui-checkbox-svg-color);-webkit-mask:var(--_iui-checkbox-mask-image)no-repeat center;mask:var(--_iui-checkbox-mask-image)no-repeat center;position:absolute;inset:0}._iui3-radio:not(:checked){--_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg)}._iui3-radio:indeterminate{--_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg)}._iui3-radio:hover{--_iui-checkbox-border-color:var(--iui-color-border-foreground-hover)}._iui3-radio:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){._iui3-radio:focus{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}}._iui3-radio:disabled{--_iui-checkbox-svg-color:var(--iui-color-icon-disabled);--_iui-checkbox-border-color:var(--iui-color-border-disabled);--_iui-checkbox-background-color:var(--iui-color-background-disabled);cursor:not-allowed}._iui3-radio._iui3-checkbox-visibility{--_iui-checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z\" /></svg>");--_iui-checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z\" opacity=\".33\" /><path d=\"m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z\" /></svg>");--_iui-checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z\" /></svg>");--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:transparent;outline-width:1px}._iui3-radio._iui3-checkbox-visibility:where(:not(:checked):not(:indeterminate)){--_iui-checkbox-svg-color:var(--iui-color-icon)}._iui3-radio._iui3-checkbox-visibility:where(:hover){--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:var(--iui-color-background-transparent-hover)}._iui3-radio._iui3-checkbox-visibility:where(:disabled){--_iui-checkbox-svg-color:var(--iui-color-icon-disabled);--_iui-checkbox-background-color:var(--iui-color-background-disabled)}._iui3-radio._iui3-loading{--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:transparent;opacity:0;cursor:wait;position:absolute}._iui3-radio:checked{--_iui-checkbox-mask-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" ><circle cx=\"8\" cy=\"8\" r=\"4\" /></svg>")}._iui3-radio:not(:checked),._iui3-radio:indeterminate{--_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg)}._iui3-radio-tile{-webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));inline-size:calc(var(--iui-size-xl)*5);padding:var(--iui-size-xs);z-index:1;outline:1px solid var(--iui-color-border);background-color:var(--iui-color-background);transition:outline-color var(--iui-duration-1)ease-out;align-content:center;justify-items:center;display:grid;position:relative}._iui3-radio-tile:where(:hover){z-index:2;outline-color:var(--iui-color-border-hover)}._iui3-radio-tile:where(:hover) ._iui3-radio-tile-icon svg{fill:var(--iui-color-icon-hover)}._iui3-radio-tile:where(:has(input:disabled),[data-iui-disabled=true]){outline-color:var(--iui-color-border-disabled);background-color:var(--iui-color-background-disabled)}._iui3-radio-tile-container{-webkit-user-select:none;user-select:none;isolation:isolate;flex-wrap:wrap;gap:1px;display:inline-flex;position:relative}._iui3-radio-tile-input{z-index:1;appearance:none;cursor:pointer;margin:0;position:absolute;inset:0}._iui3-radio-tile-input:checked{z-index:3;outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}
+._iui3-progress-indicator-linear[data-iui-status=positive]{--_iui-progress-indicator-track-fill:var(--iui-color-border-positive);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-positive);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-positive)}._iui3-progress-indicator-linear[data-iui-status=positive]::selection,._iui3-progress-indicator-linear[data-iui-status=positive] ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}._iui3-progress-indicator-linear[data-iui-status=negative]{--_iui-progress-indicator-track-fill:var(--iui-color-border-negative);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-negative);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-negative)}._iui3-progress-indicator-linear[data-iui-status=negative]::selection,._iui3-progress-indicator-linear[data-iui-status=negative] ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}._iui3-progress-indicator-linear:where([data-iui-animated=true]:not([data-iui-indeterminate=true])):before{transition:background-size 1s ease-in-out}._iui3-progress-indicator-linear:where([data-iui-indeterminate=true]):before{animation:1.5s linear infinite _iui3-uj58gzs}@keyframes _iui3-uj58gzs{0%{background-position:-60% 0;background-size:30% 100%}40%{background-position:-40% 0;background-size:40% 100%}to{background-position:200% 0;background-size:50% 100%}}._iui3-radio-wrapper{vertical-align:baseline;font-size:var(--iui-font-size-1);-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--iui-color-text);align-items:center;gap:var(--iui-size-xs);border:none;inline-size:-moz-fit-content;inline-size:fit-content;margin:0;padding:0;display:flex;position:relative}._iui3-radio-wrapper._iui3-loading{cursor:progress;color:var(--iui-color-text-disabled);font-style:italic}._iui3-radio-wrapper>._iui3-checkbox-label,._iui3-radio-wrapper>._iui3-radio-label{line-height:var(--iui-size-l)}._iui3-radio-wrapper>._iui3-checkbox-label svg,._iui3-radio-wrapper>._iui3-radio-label svg{inline-size:var(--iui-size-m);block-size:var(--iui-size-m);vertical-align:middle;fill:var(--iui-color-icon);flex-shrink:0;display:flex}._iui3-radio-wrapper._iui3-disabled{cursor:not-allowed;color:var(--iui-color-text-disabled)}._iui3-radio-wrapper._iui3-disabled svg{fill:var(--iui-color-icon-disabled)}._iui3-radio-wrapper._iui3-positive{color:var(--iui-color-text-positive)}._iui3-radio-wrapper._iui3-warning{color:var(--iui-color-text-warning)}._iui3-radio-wrapper._iui3-negative{color:var(--iui-color-text-negative)}._iui3-radio{--_iui-checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z\" /></svg>");--_iui-checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m2.75 6.875h10.5v2.25h-10.5z\" /></svg>");--_iui-checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 16 16\"></svg>");--_iui-checkbox-svg-color:var(--iui-color-icon-accent);--_iui-checkbox-border-color:var(--iui-color-border-foreground);--_iui-checkbox-background-color:var(--iui-color-background);--_iui-checkbox-mask-image:initial;inline-size:var(--iui-size-m);block-size:var(--iui-size-m);appearance:none;border-radius:var(--iui-border-radius-1);background-color:var(--_iui-checkbox-background-color);cursor:pointer;transition:outline-color var(--iui-duration-1)ease-out;outline:solid 1px var(--_iui-checkbox-border-color);outline-offset:-1px;border-radius:50%;flex-shrink:0;margin:0;display:flex;position:relative}._iui3-radio:before{content:"";inset:calc((var(--iui-checkbox-target-size,24px) - 16px)/-2);position:absolute}._iui3-radio:after{content:"";background-color:var(--_iui-checkbox-svg-color);-webkit-mask:var(--_iui-checkbox-mask-image)no-repeat center;mask:var(--_iui-checkbox-mask-image)no-repeat center;position:absolute;inset:0}._iui3-radio:not(:checked){--_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg)}._iui3-radio:indeterminate{--_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg)}._iui3-radio:hover{--_iui-checkbox-border-color:var(--iui-color-border-foreground-hover)}._iui3-radio:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){._iui3-radio:focus{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}}._iui3-radio:disabled{--_iui-checkbox-svg-color:var(--iui-color-icon-disabled);--_iui-checkbox-border-color:var(--iui-color-border-disabled);--_iui-checkbox-background-color:var(--iui-color-background-disabled);cursor:not-allowed}._iui3-radio._iui3-checkbox-visibility{--_iui-checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z\" /></svg>");--_iui-checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z\" opacity=\".33\" /><path d=\"m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z\" /></svg>");--_iui-checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z\" /></svg>");--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:transparent;outline-width:1px}._iui3-radio._iui3-checkbox-visibility:where(:not(:checked):not(:indeterminate)){--_iui-checkbox-svg-color:var(--iui-color-icon)}._iui3-radio._iui3-checkbox-visibility:where(:hover){--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:var(--iui-color-background-transparent-hover)}._iui3-radio._iui3-checkbox-visibility:where(:disabled){--_iui-checkbox-svg-color:var(--iui-color-icon-disabled);--_iui-checkbox-background-color:var(--iui-color-background-disabled)}._iui3-radio._iui3-loading{--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:transparent;opacity:0;cursor:wait;position:absolute}._iui3-radio:checked{--_iui-checkbox-mask-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" ><circle cx=\"8\" cy=\"8\" r=\"4\" /></svg>")}._iui3-radio:not(:checked),._iui3-radio:indeterminate{--_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg)}._iui3-radio-tile{-webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));inline-size:calc(var(--iui-size-xl)*5);padding:var(--iui-size-xs);z-index:1;outline:1px solid var(--iui-color-border);background-color:var(--iui-color-background);transition:outline-color var(--iui-duration-1)ease-out;align-content:center;justify-items:center;display:grid;position:relative}._iui3-radio-tile:where(:hover){z-index:2;outline-color:var(--iui-color-border-hover)}._iui3-radio-tile:where(:hover) ._iui3-radio-tile-icon svg{fill:var(--iui-color-icon-hover)}._iui3-radio-tile:where(:has(input:disabled),[data-iui-disabled=true]){outline-color:var(--iui-color-border-disabled);background-color:var(--iui-color-background-disabled)}._iui3-radio-tile-container{-webkit-user-select:none;user-select:none;isolation:isolate;flex-wrap:wrap;gap:1px;display:inline-flex;position:relative}._iui3-radio-tile-input{z-index:1;appearance:none;cursor:pointer;margin:0;position:absolute;inset:0}._iui3-radio-tile-input:checked{z-index:3;outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}
 }
 
 @layer itwinui.v3{@media (forced-colors:active){._iui3-radio-tile-input:checked{outline-color:Highlight}}