:root {
	font-family: var(--font-family);
	font-variant-numeric: slashed-zero;
	font-feature-settings:
		'cv05' on,
		'cv08' on,
		'ss04' on,
		'clig' off,
		'liga' off;

	input,
	textarea,
	select,
	button {
		font-family: var(--font-family);
		font-variant-numeric: slashed-zero;
		font-feature-settings:
			'cv05' on,
			'cv08' on,
			'ss04' on,
			'clig' off,
			'liga' off;
	}

	/* CURSOR */

	/* SUPPORTED CSS CURSOR VALUES VIA `GENERIC_CURSOR` enum. */
	[data-cursor='alias'] {
		cursor: alias;
	}

	[data-cursor='auto'] {
		cursor: auto;
	}

	[data-cursor='context-menu'] {
		cursor: context-menu;
	}

	[data-cursor='copy'] {
		cursor: copy;
	}

	[data-cursor='default'] {
		cursor: default;
	}

	[data-cursor='grab'] {
		cursor: grab;
	}

	[data-cursor='grabbing'] {
		cursor: grabbing;
	}

	[data-cursor='help'] {
		cursor: help;
	}

	[data-cursor='inherit'] {
		cursor: inherit;
	}

	[data-cursor='move'] {
		cursor: move;
	}

	[data-cursor='not-allowed'] {
		cursor: not-allowed;
	}

	[data-cursor='pointer'] {
		cursor: pointer;
	}

	[data-cursor='progress'] {
		cursor: progress;
	}

	[data-cursor='text'] {
		cursor: text;
	}

	[data-cursor='wait'] {
		cursor: wait;
	}

	[data-cursor='zoom-in'] {
		cursor: zoom-in;
	}

	[data-cursor='zoom-out'] {
		cursor: zoom-out;
	}

	/* FLOATING PANEL */

	/* NOTE THAT
		- we need to prevent accidental selection and loss of pointer events
		- we also need to prevent scrolling when dragging is in progress

		WE DO
		- force the cursor to be move while dragging, this needs to be done on this parent element instead of `body`
		  because `pointer-events: none` will cause that any `cursor` value on `body` and its children is ignored
		- prevent body scrolling when dragging
		- prevent accidental selection when dragging
		- disable all pointer events except those on `window` when dragging
		  - note that this is necessary because e.g. iframe would "steal" the events and dragging would be interrupted
		  - this is also better performance-wise because no unnecessary interactions are triggered
		- hide any active popovers
		- when `scrollbar-gutter: stable` is supported prevent design skipping because of scrollbar visibility change
			- note that this is not supported on Safari but it really does not bother us because it is handled natively
			  nicely on Mac, and Safari usage with always-on scrollbars or Safari usage on Windows is minimal
	 */
	&[data-dsfloatingpaneldraggingactive] {
		cursor: move;

		> body {
			overflow: hidden;
			/* stylelint-disable-next-line property-no-vendor-prefix */
			-webkit-user-select: none;
			user-select: none;
			pointer-events: none;

			[data-popper-placement] {
				display: none !important;
			}
		}
	}

	@supports (scrollbar-gutter: stable) {
		&[data-dsfloatingpaneldraggingactive] > body {
			scrollbar-gutter: stable;
		}
	}

	/* MODAL */

	/* NOTE THAT
		- `overscroll-behavior: contain;` cannot be used here
		- `html:has(dialog[open]:modal) > * { ... }` is causing massive slowdown if DOM is changing rapidly

		We split it to two @support cases at root level to optimize the CSS processing speed as much as possible.
		- prevent scrolling behind the modal overlay
		- prevent design skipping because of scrollbar visibility change (if supported)

		--- CASE A ---
		When `scrollbar-gutter: stable` is supported prevent design skipping because of scrollbar visibility change
		note that this is not supported on Safari but it really does not bother us because it is handled natively
		nicely on Mac, and Safari usage with always-on scrollbars or Safari usage on Windows is minimal.

		--- CASE B ---
		Fallback when `scrollbar-gutter: stable` is not supported.
	 */
	@supports (scrollbar-gutter: stable) {
		&[data-dsmodaloverlayactive] > body {
			overflow: hidden;
			scrollbar-gutter: stable;
		}
	}

	@supports not (scrollbar-gutter: stable) {
		&[data-dsmodaloverlayactive] > body {
			overflow: hidden;
		}
	}

	/* SPINNER */

	/* SUPPORTED SPINNER VARIANT DATA ATTRIBUTES
		- respects `ds-theme`
	  - variants
			- `data-ds-spinner` - apply generic spinner
			- `data-ds-spinner-inverse` - apply generic spinner with inverse colors
			- `data-ds-spinner-ai` - apply generic spinner with AI colors
	  - variant values: `small`, `medium`, `large`
	  	- set these values to the selected data attribute variant above

		SUPPORTED SPINNER ADDITIONAL DATA ATTRIBUTES
		- `data-ds-spinner-styled` - apply additional spinner styles
		- `data-ds-spinner-height` - apply default spinner height, or use `--ds-spinner-height` CSS variable
		- `data-ds-spinner-margin` - apply default spinner margin, or use `--ds-spinner-margin` CSS variable
		- `data-ds-spinner-min-height` - apply default spinner min-height, or use `--ds-spinner-min-height` CSS variable
		- `data-ds-spinner-width` - apply default spinner width, or use `--ds-spinner-width` CSS variable
		- `data-ds-spinner-img` - force spinner image variant, values: `default`, `inverse`
	 */
	:where([data-ds-spinner], [data-ds-spinner-inverse], [data-ds-spinner-ai]) {
		position: relative;
		cursor: progress;

		&:where([data-ds-spinner-styled]) {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&:where([data-ds-spinner-height]) {
			height: var(--ds-spinner-height, 100%);
		}

		&:where([data-ds-spinner-margin]) {
			margin: var(--ds-spinner-margin, auto);
		}

		&:where([data-ds-spinner-min-height]) {
			min-height: var(--ds-spinner-min-height, 100%);
		}

		&:where([data-ds-spinner-width]) {
			width: var(--ds-spinner-width, 100%);
		}

		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: block;
		}
	}

	:where(
		[data-ds-spinner='large'],
		[data-ds-spinner-inverse='large'],
		[data-ds-spinner-ai='large']
	) {
		width: var(--ds-spinner-width, 36px);
		height: var(--ds-spinner-height, 36px);

		&::before {
			width: 36px;
			height: 36px;
		}
	}

	:where(
		[data-ds-spinner='medium'],
		[data-ds-spinner-inverse='medium'],
		[data-ds-spinner-ai='medium']
	) {
		width: var(--ds-spinner-width, 24px);
		height: var(--ds-spinner-height, 24px);

		&::before {
			width: 24px;
			height: 24px;
		}
	}

	:where(
		[data-ds-spinner='small'],
		[data-ds-spinner-inverse='small'],
		[data-ds-spinner-ai='small']
	) {
		width: var(--ds-spinner-width, 18px);
		height: var(--ds-spinner-height, 18px);

		&::before {
			width: 18px;
			height: 18px;
		}
	}

	&:not([data-theme])
		:where([data-ds-spinner], [data-ds-spinner-img='default'])::before,
	&:where([data-theme='light'])
		:where([data-ds-spinner], [data-ds-spinner-img='default'])::before {
		background-image: url('https://base.cdn.emplifi.io/suite/misc/animated-icons/basic-loader.svg');
	}

	&:not([data-theme])
		:where([data-ds-spinner-inverse], [data-ds-spinner-img='inverse'])::before,
	&:where([data-theme='light'])
		:where([data-ds-spinner-inverse], [data-ds-spinner-img='inverse'])::before {
		background-image: url('https://base.cdn.emplifi.io/suite/misc/animated-icons/basic-loader-white.svg');
	}

	&:where([data-theme='dark'])
		:where([data-ds-spinner], [data-ds-spinner-img='default'])::before {
		background-image: url('https://base.cdn.emplifi.io/suite/misc/animated-icons/basic-loader-dark-mode.svg');
	}

	&:where([data-theme='dark'])
		:where([data-ds-spinner-inverse], [data-ds-spinner-img='inverse'])::before {
		background-image: url('https://base.cdn.emplifi.io/suite/misc/animated-icons/basic-loader-white.svg');
	}

	:where([data-ds-spinner-ai], [data-ds-spinner-img='ai'])::before {
		background-image: url('https://base.cdn.emplifi.io/suite/misc/animated-icons/loader-ai.svg');
	}
}