@import "./../../scss/color-tokens";
@import "./../../scss/text-tokens";
@import "./../../scss/width";
@import "./../../scss/height";
@import "./../../scss/mixins";

//https://fonts.google.com/specimen/Montserrat?query=mon
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:wght@300&family=Roboto:wght@100;300;400;500;700&display=swap");
//https://fonts.google.com/betterspecimen/Courier+Prime
@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:wght@300&family=Roboto:wght@100;300;400;500;700&display=swap");

html,
body {
	height: 100vh;
	width: 100vw;
	display: block;
	margin: 0px;
	color: var(--color-text-default);

	// for vue app root element reset
	#app {
		height: 100%;
		margin: 0px;
	}
	#root {
		height: 100%;
	}

	@include inherit-size("medium");
}

*[loki-test] [loading] {
	visibility: hidden;
}

[data-theme="f-light"] {
	--color-emoji-picker-background: 229 231 234;
	--color-emoji-picker-text: 18 20 22;
	--color-emoji-picker-border: 133 153 173;
	--color-emoji-picker-input: 204 208 215; //custom
	--color-emoji-picker-accent: 66 160 240;
}

[data-theme="f-dark"] {
	--color-emoji-picker-background: 42 55 71;
	--color-emoji-picker-text: 223 228 236;
	--color-emoji-picker-border: 92 112 138;
	--color-emoji-picker-input: 59 77 98; //custom
	--color-emoji-picker-accent: 66 160 240;
}

.f-div-highlight-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black overlay */
	z-index: 999;
}

:root {
	--transition-time-default: 0.25s;
	--transition-time-rapid: 0.12s;
	--transition-time-delayed: 0.4s;
	--flow-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}