/*!
* Components/AppBar
*/

.app-bar.x-app-bar {
	--x-toolbar-content-height: var(--x-sys-layout-app-bar-height);
	--x-toolbar-height: var(--x-sys-layout-app-bar-height);

	background-color: transparent;
	left: 0;
	position: fixed;
	right: 0;
	width: 100%;
	z-index: 1000;
}

.app-bar.x-app-bar::before {
	content: "";
	background-image: linear-gradient(
		180deg,
		rgba(var(--x-sys-color-surface), 1) 20%,
		rgba(var(--x-sys-color-surface), 0.8) 60%,
		rgba(var(--x-sys-color-surface), 0.6) 80%,
		rgba(var(--x-sys-color-surface), 0) 100%
	);
	height: calc(var(--x-toolbar-height) + 2.5rem);
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
}