:root {
	--windowBackground: white;
	--windowShadowColour: rgba(0, 0, 0, 0.34);
	--windowShadow: 0px 0px 12px 0px var(--windowShadowColour);

	color: black !important; // Default label colour.
}

window {
	background: transparent !important;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
	perspective: 800px;

	> #windowAnimation {
		margin: auto;

		// prepare for animation
		opacity: 0;

		// animation settings
		animation-name: windowOpen;
		animation-duration: 400ms;
		animation-fill-mode: forwards;
	}
}

#windowStyling {
	position: relative;
	background-color: var(--windowBackground);
	outline: 1px solid var(--accentFirst);
	box-shadow: var(--windowShadow);
	height: 100%;
	justify-content: start;
	overflow: hidden;
	transition: max-width .3s, min-width .3s, background-color 1s;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: var(--windowBackground);
		z-index: -1;
		pointer-events: none;
	}
}

#windowContent {
	display: none;
	flex: 1;
	opacity: 0;
	transition: opacity .5s;

	&.show {
		opacity: 1;
		display: flex;
	}

	> #extendedTitlebarArea {
		padding-right: 11px;
		height: 53px;
		-moz-window-dragging: drag !important;
		display: none;
		z-index: 1;

		> #accentGradient {
			height: 100%;
			width: 18px;
			background: linear-gradient(0deg, var(--accentGradient));
			background-size: 100% 300%;
			background-position-y: 100%;
			margin-inline-end: 19px;
		}

		> #navigationButtons {
			margin-block-start: 3px;
		}

		> #text {
			text-transform: lowercase;
			font-weight: 300;

			vbox {
				display: none;

				> .title {
					margin-top: -14px;
					font-size: 24pt;
					color: var(--accentFirst);
					pointer-events: none;
				}
			}

			> #description {
				margin-top: -4px;
				font-size: 18pt;
				color: #666666;
				animation-delay: 240ms;
			}

			vbox > .title,
			> #description {
				// prepare for animation
				opacity: 0;
				transform: translateX(-20px);

				// animation settings
				animation-name: fadeInLeftToRight;
				animation-duration: 480ms;
				animation-fill-mode: forwards;
			}
		}

		> #navigationButtons + #text {
			margin-left: 11px;
		}
	}
}