$outline: #fff;
$highlight: #5c5;

.card-package
{
	max-width: 250px;
	min-width: 250px;
	border: 1px solid transparent;
	margin: 2px;
	flex-direction: column;

	.card-image
	{
		border-radius: 5px;
		box-shadow: 5px 5px 30px rgba( black, 0.2 );
		cursor: pointer;
		background-position: center;
		background-size: cover;
		position: relative;

		.hover-overlay
		{
			position: absolute;
			left: 0px;
			top: 0px;
			bottom: 0px;
			right: 0px;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
			opacity: 0;
			background-color: rgba( #222, 0.0 );
			display: none;
			transition: all 0.3s ease-out;
			pointer-events: none;

			.thumb-video
			{
				width: 100%;
				height: 100%;
				background-position: center;
				background-size: cover;
			}

			i
			{
				font-size: 80px;
				text-shadow: 4px 4px 4px black;
			}
		}

		&:hover
		{
			box-shadow: 0px 0px 2px 2px $outline, 0px 0px 10px rgba( $outline, 0.8 );

			.hover-overlay
			{
				opacity: 1;
				display: flex;
			}
		}

		&:active
		{
			top: 5px;
			left: 2px;
		}
	}

	.package-card-body
	{
		flex-shrink: 0;
		font-size: 13px;
		flex-direction: row;
		margin-top: 12px;
		//  border: 1px solid red;
		gap: 10px;

		.org-image
		{
			width: 38px;
			flex-shrink: 0;
			//border: 1px solid green;

			.img
			{
				width: 38px;
				height: 38px;
				background-size: cover;
				border-radius: 5px;
				background-color: white;
			}
		}

		.body-content
		{
			// border: 1px solid cyan;
			flex-direction: column;
			flex-grow: 1;
			flex-shrink: 1;
			white-space: nowrap;
			gap: 3px;

			.orgrow
			{
				flex-direction: row;
				flex-shrink: 0;
				flex-grow: 1;
				gap: 4px;
				color: #5A738B;

				.orgname
				{
					flex-grow: 0;
				}

				.updated
				{
					flex-shrink: 0;
				}
			}

			.body-meta
			{
				gap: 12px;
				margin-top: 6px;
				color: #5A738B;

				> div
				{
					gap: 2px;
					font-size: 13px;
					align-items: center;

					i
					{
						font-size: 16px;
					}
				}
			}
		}

		.title
		{
			font-weight: bold;
			text-overflow: ellipsis;
			cursor: pointer;

			&:hover
			{
				text-decoration: underline;
			}
		}

		.orgname
		{
			text-overflow: ellipsis;
			white-space: nowrap;
			cursor: pointer;

			&:hover
			{
				text-decoration: underline;
				color: white;
			}
		}
	}

	.card-image
	{
		aspect-ratio: 16/9;
		flex-grow: 1;
		flex-shrink: 0;
	}

	&.is-favourite .body-meta .favourite
	{
		color: #fac;
	}

	&:intro
	{
		opacity: 0.0;
	}

	opacity: 1;
	transition: all 0.1s ease-out;
}

.card-decorator-unplayed, .card-decorator-updated
{
	background-color: #182229;
	color: #65788B;
	position: absolute;
	left: 0px;
	top: 0px;
	padding: 6px 8px;
	text-transform: uppercase;
	border-radius: 3px 0px 2px 0px;
	font-size: 10px;
	letter-spacing: 1px;
}

.card-decorator-updated
{
	background-color: darken( rgba( $highlight, 0.95 ), 0.33 );
	color: lighten( $highlight, 0.5 );
}

.card-decorator-hidden
{
	position: absolute;
	background-color: #0009;
	bottom: 0;
	left: 0;
	right: 0;
	color: white;
	padding: 10px;
	text-transform: uppercase;
	font-size: 12px;
	z-index: 5;
}

.card-decorator-users
{
	background-color: darken( rgba( $highlight, 0.95 ), 0.33 );
	color: lighten( $highlight, 0.5 );
	position: absolute;
	right: 0px;
	top: 0px;
	padding: 3px 8px;
	border-radius: 0px 3px 0px 2px;
	aspect-ratio: 1;
	box-shadow: 2px 2px 16px #0002;
	font-size: 12px;
	font-weight: bold;
	gap: 3px;
	align-items: center;

	i
	{
		font-size: 16px;
	}
}