@import "/UI/Theme.scss";

$edit-bar-spacing: 4px;

SpawnlistView
{
	.spawnlist-header
	{
		width: 100%;
		flex-direction: column;
		gap: 6px;

		// the first bar is taller than the others, it has the name of the list, so its buttons stay at the top
		> SpawnMenuToolbar:first-child
		{
			height: auto;
			align-items: flex-start;
		}

		SpawnMenuToolbar
		{
			> .left
			{
				flex-grow: 1;
				min-width: 0px;
				justify-content: flex-start;
			}

			> .right
			{
				flex-shrink: 0;
			}
		}
	}

	.spawnlist-identity
	{
		flex-direction: column;
		gap: 2px;
		min-width: 0px;

		.title-row
		{
			align-items: center;
			gap: 10px;
			min-width: 0px;
		}

		.identity-icon
		{
			font-size: 28px;
			color: $ui-heading-on-gray;
			flex-shrink: 0;
		}

		.spawnlist-name
		{
			@include ui-display-heading;
			min-width: 0px;
		}

		.meta
		{
			align-items: center;
			gap: 16px;
			font-size: 12px;
			font-weight: 500;
			color: $ui-subtext-on-gray;

			span
			{
				align-items: center;
				gap: 4px;
			}

			IconPanel { font-size: 14px; }
		}
	}

	// editing bar
	.edit-bar
	{
		align-items: stretch;
		margin-top: 8px;
		border: 1px solid rgba( 255, 255, 255, 0.5 );
		border-radius: 2px;
		font-size: 12px;

		.edit-instructions
		{
			align-items: center;
			flex-grow: 1;
			min-width: 0px;
			padding: 0 12px;
			color: $ui-heading-on-gray;
			font-weight: 600;
		}

		.edit-actions
		{
			align-items: center;
			flex-shrink: 0;
			gap: $edit-bar-spacing;
			padding: $edit-bar-spacing;
		}
	}

	SpawnMenuContent > .body
	{
		flex-direction: column;
		min-height: 0px;
	}

	MixedVirtualGrid
	{
		height: 0px;
		flex-grow: 1;
		min-height: 0px;
	}
}