@use 'sass:meta';
@use '../shared/styles/properties';
@use '../shared/styles/theme';
@use '../shared/styles/scrollbars';
@use '../shared/styles/utils';

* {
	box-sizing: border-box;
}

// avoids FOUC for elements not yet called with `define()`
:not(:defined) {
	visibility: hidden;
}

[hidden] {
	display: none !important;
}

html {
	height: 100%;
	font-size: 62.5%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	--color-focus-border: var(--vscode-focusBorder);
}

body {
	padding: 0;
	background-color: var(--color-background);
	color: var(--color-foreground);
	font-family: var(--font-family);
	min-height: 100%;
	line-height: 1.4;
	font-size: var(--vscode-font-size);
	overflow: hidden;
}

:focus,
:focus-within {
	outline-color: var(--color-focus-border);
}

@include meta.load-css('../shared/codicons');
@include meta.load-css('../shared/utils');
@include scrollbars.scrollbarFix();
@include scrollbars.scrollableBase();

/* Scrollbar styling for sl-select listbox (hoisted to body) */
sl-select::part(listbox) {
	scrollbar-width: thin;
	scrollbar-color: var(--vscode-scrollbarSlider-background) transparent;
}

/* Ensure tooltip variables have fallbacks for hoisted tooltips */
:root {
	--sl-tooltip-background-color: var(
		--color-hover-background,
		var(--vscode-editorHoverWidget-background, var(--vscode-editor-background))
	);
	--sl-tooltip-color: var(
		--color-hover-foreground,
		var(--vscode-editorHoverWidget-foreground, var(--vscode-foreground))
	);
	--gl-tooltip-border-color: var(
		--color-hover-border,
		var(--vscode-editorHoverWidget-border, var(--vscode-widget-border))
	);
	--gl-tooltip-shadow: var(--vscode-widget-shadow, rgba(0, 0, 0, 0.36));
}
