@import "/UI/Theme.scss";

SpawnMenuPage
{
	flex-direction: row;
	width: 100%;
	height: 100%;
}

SpawnMenuPage > .left
{
	@include ui-sidebar;
	height: 100%;
	width: 254px;
	flex-grow: 0;
	margin-right: 19px;
}

SpawnMenuPage > .body
{
	position: relative;
	flex-grow: 1;
	min-width: 0px;
}

// --- tree -----------------------------------------------------------------------------------

SpawnMenuPage .tree
{
	flex-grow: 1;
	min-height: 0px;

	.treeview
	{
		flex-grow: 1;
		@include ui-scroll;
	}
}

SpawnMenuPage .treeview .tree-row
{
	color: $ui-text;
	font-size: 12px;
	font-weight: 500;

	@include ui-selectable;

	&.selected
	{
		background-color: transparent;
	}

	&.active
	{
		@include ui-selected;
	}

	&.disabled
	{
		opacity: 0.45;
		pointer-events: none;
	}

	// every pooled row carries a skeleton once it's been a loading row, only loading rows show it
	SpawnlistSkeleton
	{
		display: none;
	}

	&.loading
	{
		opacity: 1;

		.tree-content
		{
			flex-grow: 1;
			align-self: stretch;
		}

		SpawnlistSkeleton
		{
			display: flex;
		}
	}
}

SpawnMenuPage .menu-footer
{
	flex-shrink: 0;
}