@import './colors.scss';

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

@layer utilities {
	/* Hide scrollbar for Chrome, Safari and Opera */
	.no-scrollbar::-webkit-scrollbar {
		display: none;
	}

	/* Hide scrollbar for IE, Edge and Firefox */
	.no-scrollbar {
		-ms-overflow-style: none; /* IE and Edge */
		scrollbar-width: none; /* Firefox */
	}
}

.html {
	background: #404040;
}

.backdrop-blur {
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}
.navbar-blur {
	backdrop-filter: blur(28px);
	-webkit-backdrop-filter: blur(28px);
}

.top-bar-blur {
	@apply border-app-line/50;
	backdrop-filter: saturate(120%) blur(18px);
}

.inset-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.inset-center-blur {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.mask-fade-out {
	// -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
	mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50px);
}

.cool-shadow {
	box-shadow: rgb(0 0 0 / 9%) 0px 3px 12px;
}

// Without this Tauri displays button differently to web
[type='button'] {
	-webkit-appearance: none;
}
