WorkshopPackageDetail
{
	flex-direction: column;
	padding-bottom: 150px;
	width: 100%;

	.return
	{
		background-color: #0008;
		padding: 8px;
		border-radius: 8px;
		cursor: pointer;
		pointer-events: all;
		border-radius: 4px;
		transition: all 0.1s ease;
		flex-shrink: 0;
		gap: 8px;
		font-size: 28px;
		margin-bottom: 16px;
		backdrop-filter: blur( 10px );

		.iconpanel
		{
			font-size: 44px;
		}

		&:hover
		{
			background-color: #000d;
		}

		&:active
		{
			background-color: #0003;
		}

		&.active
		{
			background-color: #08f;
		}
	}

	.description
	{
		border-radius: 8px;
		flex-shrink: 1;
		flex-grow: 1;
		padding: 16px;
		pointer-events: all;

		> HtmlPanel
		{
			width: 100%;
			overflow: scroll;
			flex-shrink: 1;
			flex-grow: 1;
			font-size: 16px;
			color: #fff;

			h1, h2, h3
			{
				font-size: 20px;
				color: #fff;
			}
		}
	}
}


.interactions
{
	gap: 10px;
	flex-shrink: 0;
	margin: 32px 0;
	flex-direction: column;

	> div
	{
		gap: 10px;
	}

	.option
	{
		background-color: #0008;
		padding: 8px;
		border-radius: 8px;
		cursor: pointer;
		pointer-events: all;
		border-radius: 4px;
		transition: all 0.1s ease;
		flex-shrink: 0;
		gap: 8px;
		font-size: 22px;
		margin-bottom: 16px;
		flex-grow: 1;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur( 10px );

		.iconpanel
		{
			font-size: 32px;
		}

		&:hover
		{
			background-color: #000d;
		}

		&:active
		{
			background-color: #0003;
		}

		&.active
		{
			background-color: #08f;
		}
	}
}

.detail
{
	flex-direction: row;
	gap: 16px;
	flex-shrink: 0;
	backdrop-filter: blur( 10px );
	border-radius: 8px;
	padding: 8px;

	.thumb
	{
		width: 128px;
		height: 128px;
		background-position: center;
		background-size: contain;
		border-radius: 8px;
	}

	.meta
	{
		flex-direction: column;
	}

	i
	{
		font-size: 20px;
		margin-right: 8px;
		align-items: center;
	}

	.title
	{
		flex-shrink: 0;
		font-size: 30px;
		font-weight: 650;
		cursor: pointer;
		pointer-events: all;
	}

	.org
	{
		flex-shrink: 0;
		cursor: pointer;
		pointer-events: all;
		opacity: 0.7;

		&:hover
		{
			opacity: 1;
		}
	}

	.created
	{
		opacity: 0.7;
	}
}

.interactions .voteup, .interactions .votedown
{
	flex-direction: column;

	.iconpanel
	{
		font-size: 64px;
	}
}