:root
{
	--menu-bar-size: 8rem;

	--transition-time: 250ms;
}

body
{
	margin: 0;
}

.container
{
	display: flex;

	width: 100vw;
	height: 100vh;
}

/* Sidebar */
@keyframes sidebar-show
{
	0%
	{
		left: 0;
	}
	100%
	{
		left: var(--menu-bar-size);
	}
}

@keyframes sidebar-hide
{
	0%
	{
		left: var(--menu-bar-size);
	}
	100%
	{
		left: 0;
	}
}

.ui-container
{
	display: flex;
	flex-direction: column;
	z-index: 2;

	width: var(--menu-bar-size);

	padding: 1rem 0;

	/* Set background image, use multiply mode to tint the image */
	background-blend-mode: multiply;
	background-color: #666666;
	background-image: url("./images/dirt.png");
	background-size: 50%;
	image-rendering: pixelated;

	border-right: 0.25rem solid black;
}

.ui-container-sub
{
	z-index: 1;

	position: absolute;
	left: 0;

	/* Set top and bottom to 0 to fill height */
	top: 0;
	bottom: 0;

	/* Make this div scrollable */
	overflow: auto;

	background-color: #444444;
}

.ui-button
{
	width: 76px;
	height: 76px;

	margin: 1rem auto;

	background-size: cover;
	background-image: url("./images/icons/button.png");
	image-rendering: pixelated;
}

.ui-button:hover
{
	background-image: url("./images/icons/button_hover.png");
}

.ui-button > img
{
	width: 100%;
	height: 100%;

	image-rendering: pixelated;
}

#glviewport
{
	flex-grow: 1;
}

#glviewport > canvas
{
	/* Use absolute positioning on the Three.js canvas so it will not prevent the parent div from shrinking */
	position: absolute;
}

/* MOBILE */
@media (max-aspect-ratio: 5/4)
{
	.container
	{
		flex-direction: column;
	}

	/* Sidebar */
	@keyframes sidebar-show
	{
		0%
		{
			top: 0;
		}
		100%
		{
			top: var(--menu-bar-size);
		}
	}

	@keyframes sidebar-hide
	{
		0%
		{
			top: var(--menu-bar-size);
		}
		100%
		{
			top: 0;
		}
	}

	.ui-container
	{
		flex-direction: row;

		width: auto;
		height: var(--menu-bar-size);

		padding: 0 1rem;

		background-size: 15%;

		/* Move border to bottom */
		border-right: none;
		border-bottom: 0.25rem solid black;
	}

	.ui-container-sub
	{
		/* Fill width instead of height */
		top: auto;
		bottom: auto;

		left: 0;
		right: 0;
	}

	.ui-button
	{
		margin: auto 1rem;

		width: 4.75rem;
		height: 4.75rem;
	}

	.ui-button > img
	{
		width: auto;
	}
}