@import url('https://fonts.googleapis.com/icon?family=Material+Icons') layer(base);
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Outlined') layer(base);
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap')
	layer(base);

@import 'tailwindcss';

@plugin '@tailwindcss/typography';
@plugin '@tailwindcss/forms' {
	strategy: 'class';
}

@theme {
	--font-sans: Roboto, sans-serif;
	--color-primary: #c02b28;
	--color-secondary: #05163a;
	--color-background: #05163a;
	--color-foreground: #ffffff;
}

@layer base {
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		border-color: var(--color-gray-200, currentcolor);
	}
}

:root {
	--primary: var(--color-primary);
	--secondary: var(--color-secondary);
	--background: var(--color-background);
	--foreground: var(--color-foreground);
}

* {
	user-select: none;
}

body {
	background-color: var(--background);
	color: var(--foreground);
	min-height: 100dvh;
	overflow-x: hidden;
}

input,
textarea {
	user-select: text;
}

// Forms
:is(.form-input, .form-select) ~ span {
	display: none;
}

.is-invalid ~ span {
	display: block;
}

// scanner
#scanner__dashboard {
	display: none;
}

#scanner {
	video {
		height: 100%;
		object-fit: cover;
	}
}

#scanner.user video {
	transform: scaleX(-1);
}