@import url("./extra-tokens.css");

/**
 * Additional css tokens not from design system.
 */
:root {
	/* Temp variable until neetly fixes their surface state tokens. */
	--esx-tertiary-bg: color-mix(in srgb, var(--esd-tertiary-hover) 50%, transparent 50%);

	/* outline used in place of outline-decoration-secondary-gradient
		as the one in the design is a gradient and borders do not support this. */
	--esx-panel-outline-dark: rgb(42 45 43);
	--esx-panel-outline-light: rgb(44.3% 47.5% 44.3% / 18%);
	--esx-panel-outline: ;

	/* always makes the item a circle */
	--esx-border-radius-circle: 999px;

	/* always rounds the edges into a pill shape */
	--esx-border-radius-pill: 999px;
	--esx-button-size-small: var(--esd-size-6);
	--esx-button-size-medium: var(--esd-size-10);
	--esx-button-size-large: var(--esd-size-12);
	--esx-button-padding: calc(var(--esd-size-unit) * 2.5);
	--esx-index-drawer: 700;
	--esx-index-dialog: 800;
	--esx-index-popout: 900;
	--esx-index-toast: 950;
	--esx-index-tooltip: 1000;
	--esx-focus-ring: 2px solid var(--esd-focus);
	--esx-focus-offset: 2px;
	--esx-focus-transition: outline var(--esx-transition-fast) ease-out;
	--esx-focus-index: 2;
	--esx-spacing-xs: var(--esd-size-1);
	--esx-spacing-s: var(--esd-size-2);
	--esx-spacing-m: var(--esd-size-3);
	--esx-spacing-l: var(--esd-size-4);
	--esx-spacing-xl: var(--esd-size-5);
	--esx-spacing-xxl: var(--esd-size-6);
	--esx-internal-spacing-xxs: var(--esd-size-half);
	--esx-internal-spacing-xs: var(--esd-size-1);
	--esx-internal-spacing-s: var(--esd-size-2);
	--esx-internal-spacing-m: var(--esd-size-3);
	--esx-internal-spacing-l: var(--esd-size-4);
	--esx-internal-spacing-xl: var(--esd-size-5);
	--esx-internal-spacing-xxl: var(--esd-size-6);
	--esx-transition-x-slow: 1000ms;
	--esx-transition-slow: 500ms;
	--esx-transition-medium: 300ms;
	--esx-transition-fast: 150ms;
	--esx-transition-x-fast: 75ms;
	--esx-box-shadow-xs: var(--esd-elevation-1);
	--esx-box-shadow-s: var(--esd-elevation-2);
	--esx-box-shadow-m: var(--esd-elevation-3);
	--esx-box-shadow-l: var(--esd-elevation-4);
	--esx-box-shadow-xl: var(--esd-elevation-5);

	/* Tokens for styling compact mode. */
	--esx-internal-spacing-compact-xxs: var(--esx-internal-spacing-xxs);
	--esx-internal-spacing-compact-xs: var(--esx-internal-spacing-xs);
	--esx-internal-spacing-compact-s: var(--esx-internal-spacing-s);
	--esx-internal-spacing-compact-m: var(--esx-internal-spacing-m);
	--esx-internal-spacing-compact-l: var(--esx-internal-spacing-l);
	--esx-internal-spacing-compact-xl: var(--esx-internal-spacing-xl);
	--esx-internal-spacing-compact-xxl: var(--esx-internal-spacing-xxl);
}

@media (pointer: fine) {
	:root[compact] {
		--esx-internal-spacing-compact-xxs: calc(var(--esd-size-unit) / 4);
		--esx-internal-spacing-compact-xs: var(--esd-size-half);
		--esx-internal-spacing-compact-s: var(--esd-size-1);
		--esx-internal-spacing-compact-m: var(--esd-size-2);
		--esx-internal-spacing-compact-l: var(--esd-size-3);
		--esx-internal-spacing-compact-xl: var(--esd-size-4);
		--esx-internal-spacing-compact-xxl: var(--esd-size-5);
	}
}
*::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-height);
}
*::-webkit-scrollbar-track {
	background: var(--scrollbar-track);
}
*::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb-bg);
	border-radius: var(--scrollbar-thumb-border-radius);
	background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
	background: var(--scrollbar-corner, var(--scrollbar-track));
}
.scroll-lock {
	overflow: hidden !important;
}