@import './colors.scss';

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

.html {
	background: #404040;
}

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

.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%);
}

.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;
}