@import "_packageicon.scss";
@import "_tabs.scss";
@import "_packagelist.scss";

spawnmenu
{
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding: 80px 100px;
	padding-bottom: 200px;
	pointer-events: none;
	transition: all 0.1s ease-out;
	position: absolute;
	font-family: poppins;
	opacity: 0;
	z-index: 10;
	backdrop-filter: blur( 10px ) contrast( 50% ) saturate( 50% ) brightness( 10% );

	.left
	{
		flex-grow: 1;
		flex-direction: column;
		position: relative;
		left: -500px;
		transition: all 0.3s ease-in;

		.body
		{
			flex-grow: 1;
		}
	}

	.right
	{
		margin-left: 50px;
		flex-direction: column;
		min-width: 400px;
		flex-shrink: 0;
		left: 500px;
		transition: all 0.3s ease-in;

		.body
		{
			//	background-color: rgba( #333, 0.95 );
			flex-grow: 1;
			padding: 10px;

			.toollist
			{
				flex-direction: column;
				width: 150px;
				color: #aaa;

				button
				{
					padding: 3px 10px;
					font-size: 11px;
					transition: all 0.2s ease-out;
					cursor: pointer;

					&:hover
					{
						//border-left: 3px solid #3273eb;
						color: white;
					}

					&.active
					{
						//border-left: 5px solid #3273eb;
						color: white;
					}
				}
			}

			.inspector
			{
				//background-color: rgba( #111, 0.7 );
				flex-grow: 1;
				margin-left: 5px;
				border-radius: 0 3px 3px 0;
			}
		}
	}
}

.spawnmenuopen spawnmenu
{
	transition: all 0.2s ease-out;
	pointer-events: all;
	opacity: 1;
	transform: scale( 1 );

	.left, .right
	{
		left: 0;
		transition: all 0.1s ease-out;
	}
}


.spawnpage
{
	display: none;

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

	.canvas
	{
		overflow: scroll;
		width: 100%;
		flex-grow: 1;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 10px;
		border-radius: 5px;

		.cell
		{
			padding: 5px;
		}

		.icon
		{
			border-radius: 8px;
			color: rgba( #fff, 0.5 );
			font-size: 12px;
			text-align: center;
			cursor: pointer;
			width: 100%;
			height: 100%;
			background-position: center;
			background-size: cover;
			background-color: rgba(black, 0.0);
			background-image: url( /entity/spawnicon.png );

			label
			{
				font-size: 9px;
				position: absolute;
				bottom: -17px;
				left: 0;
				right: 0;
				pointer-events: none;
			}

			&:hover
			{
				color: #fff;
				background-color: rgba(black, 0.1);
			}

			&:active
			{
			}
		}
	}
}


spawnmenu .sidebar
{
	flex-direction: column;
	width: 30px;
	padding: 10px;

	.group
	{
		flex-direction: column;
	}

	button
	{
		cursor: pointer;
		border-radius: 5px;
		color: white;
	}
}