:root {
	--util-menu-height: 2rem;
	--taskbar-margin: 0.5rem;
}

.ProzillaOS-Taskbar {
	--taskbar-opacity: 0.1;

	height: 100%;
	pointer-events: none;
}

.ProzillaOS-Taskbar::before, .ProzillaOS-Taskbar::after {
	display: none;
}

.ProzillaOS-Taskbar_MenuIcons {
	display: none;
}

.ProzillaOS-Taskbar_AppIcons {
	position: absolute;
	bottom: var(--taskbar-margin);
	left: 50%;
	width: auto;
	height: auto;
	min-height: var(--taskbar-height);
	transform: translateX(-50%);
	border-radius: var(--border-radius-1);
	transition: height 200ms ease-out 100ms;
	pointer-events: auto;
}

.ProzillaOS-Taskbar_AppIcons:has(.ProzillaOS-Taskbar_AppIcon:hover) {
	animation: expand 200ms ease-out forwards;
}

@keyframes expand {
	0% {
		height: var(--taskbar-height);
	}
	100% {
		height: calc(var(--taskbar-height) * 150%);
	}
}

.ProzillaOS-Taskbar_AppIcons::after,
.ProzillaOS-Taskbar_AppIcons::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	pointer-events: none;
}

.ProzillaOS-Taskbar_AppIcons::after {
	opacity: var(--taskbar-opacity);
	background-color: var(--foreground-color-0);
	z-index: -2;
}

.ProzillaOS-Taskbar_AppIcons::before {
	backdrop-filter: var(--taskbar-filter);
	z-index: -3;
}

.ProzillaOS-Taskbar_AppIcons > div {
	position: relative;
	width: auto;
	height: 100%;
	align-items: flex-end;
}

.ProzillaOS-Taskbar_AppIcon {
	--scale: var(--taskbar-height);
	width: var(--scale);
	height: var(--scale);
	padding: 0.5rem;
	transition: width 200ms ease-out, height 200ms ease-out, background-color 100ms ease-in-out !important;
}

.ProzillaOS-Taskbar_AppIcon svg {
	transform: none !important;
}

.ProzillaOS-Taskbar_AppIcon:hover {
	--scale: calc(var(--taskbar-height) * 1.5);
}

.ProzillaOS-Taskbar_UtilIcons {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--util-menu-height);
	background-color: var(--taskbar-color);
	box-shadow: 0.1rem 0.1rem 0.2rem 0.1rem color-mix(in srgb, var(--svg-drop-shadow-color) 50%, transparent);
	pointer-events: auto;
}

.ProzillaOS-Taskbar_UtilIcons button {
	display: flex;
	gap: 0.5rem;
}

.ProzillaOS-Taskbar_UtilIcons button br {
	display: none;
}

.ProzillaOS-Desktop .ProzillaOS-DirectoryList {
	margin-top: var(--util-menu-height);
}