@tailwind base;
@tailwind components;
@tailwind utilities;

/* Utility classes */
.top-bar-blur {
	backdrop-filter: saturate(120%) blur(18px);
}

.frame::before {
	content: "";
	pointer-events: none;
	user-select: none;
	position: absolute;
	inset: 0px;
	border-radius: inherit;
	padding: 1px;
	background: var(--color-app-frame);
	mask:
		linear-gradient(black, black) content-box content-box,
		linear-gradient(black, black);
	mask-composite: xor;
	-webkit-mask-composite: xor;
	z-index: 9999;
}

.no-scrollbar::-webkit-scrollbar {
	display: none;
}

.no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.mask-fade-out {
	mask-image: linear-gradient(
		to bottom,
		black calc(100% - 40px),
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to bottom,
		black calc(100% - 40px),
		transparent 100%
	);
}

body {
	margin: 0;
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
		"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
