@font-face {
	font-family: 'Google Sans';
	src: url('https://ui.partsbooster.com/fonts/GoogleSans-Bold.woff2') format('woff2'),
		url('https://ui.partsbooster.com/fonts/GoogleSans-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Google Sans';
	src: url('https://ui.partsbooster.com/fonts/GoogleSans-BoldItalic.woff2') format('woff2'),
		url('https://ui.partsbooster.com/fonts/GoogleSans-BoldItalic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Google Sans';
	src: url('https://ui.partsbooster.com/fonts/GoogleSans-MediumItalic.woff2') format('woff2'),
		url('https://ui.partsbooster.com/fonts/GoogleSans-MediumItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Google Sans';
	src: url('https://ui.partsbooster.com/fonts/GoogleSans-Medium.woff2') format('woff2'),
		url('https://ui.partsbooster.com/fonts/GoogleSans-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Google Sans';
	src: url('https://ui.partsbooster.com/fonts/GoogleSans-Italic.woff2') format('woff2'),
		url('https://ui.partsbooster.com/fonts/GoogleSans-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Google Sans';
	src: url('https://ui.partsbooster.com/fonts/GoogleSans-Regular.woff2') format('woff2'),
		url('https://ui.partsbooster.com/fonts/GoogleSans-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--gray: theme('colors.gray');
	--gray-light: theme('colors.gray-light');
	--green: theme('colors.green');
	--green-light: theme('colors.green-light');
	--red: theme('colors.red');
	--red-light: theme('colors.red-light');
	--blue: theme('colors.blue');
	--blue-light: theme('colors.blue-light');
	--pink: theme('colors.pink');
	--pink-light: theme('colors.pink-light');
	--orange: theme('colors.orange');
	--orange-light: theme('colors.orange-light');
	--yellow: theme('colors.yellow');
	--yellow-light: theme('colors.yellow-light');
	--primary: theme('colors.primary');
	--primary-dark: theme('colors.primary-dark');
	--secondary: theme('colors.secondary');
	--dark: theme('colors.dark');
	--muted-50: theme('colors.muted.50');
	--muted-100: theme('colors.muted.100');
	--muted-200: theme('colors.muted.200');
	--muted-300: theme('colors.muted.300');
	--switcher-size: 24px;
	--input-bg: white;
	--loading-color: theme('colors.primary');
	--selectable-ring: 1px;
	--selectable-color: theme('colors.muted.200');
	--brand-icon: 58px;
	--avatar-size: 40px;
	--dialog-index: 1500;
	--dialog-color: theme('colors.dark');
	--dialog-bg: theme('colors.muted.50');
	--dialog-image: initial;
}

.si {
	font-size: inherit;
	line-height: 1;
}

.has-dialog {
	@apply fixed inset-0;
	top: var(--scroll-top);
}

@keyframes clippath {
	0%,
	100% {
		clip-path: inset(0 0 95% 0);
	}
	25% {
		clip-path: inset(0 95% 0 0);
	}
	50% {
		clip-path: inset(95% 0 0 0);
	}
	75% {
		clip-path: inset(0 0 0 95%);
	}
}