@mixin resource-picker-base
{
	flex-direction: row;
	align-items: center;
	flex-grow: 1;
	padding: 0.2rem 0.4rem;
	gap: 0.75rem;
	font-size: 1rem;
	border-radius: 8px;
	cursor: pointer;
	background-color: #0088ff22;
	border: 1px solid #0088ff55;

	&:hover
	{
		background-color: #0088ff44;
		border-color: #0088ff88;
	}

	&:active
	{
		background-color: #0088ff88;
		border-color: #08f;
	}
}

@mixin resource-picker-control
{
	@include resource-picker-base;

	.preview
	{
		width: 2.5rem;
		height: 2.5rem;
		flex-shrink: 0;
		background-color: rgba( 0, 0, 0, 0.3 );
		border-radius: 4px;
		align-items: center;
		justify-content: center;
		overflow: hidden;

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

		.ext-badge
		{
			font-size: 0.6rem;
			font-weight: 800;
			color: rgba( 255, 255, 255, 0.6 );
			letter-spacing: 0.05em;
		}
	}

	.content
	{
		flex-direction: column;
		flex-grow: 1;
		justify-content: center;
		gap: 0.1rem;

		.title
		{
			font-size: 0.95rem;
			font-weight: 600;
			color: #fff;

			&.empty
			{
				color: rgba( 255, 255, 255, 0.4 );
			}
		}

		.subtitle
		{
			font-size: 0.75rem;
			font-weight: 400;
			color: rgba( 255, 255, 255, 0.4 );
		}
	}
}