LiveLobbyCard
{
	flex-direction: row;
	font-family: Poppins;
	width: 300px;
	backdrop-filter: blur( 20px ) brightness( 0.7 );
	transition: all 0.1s linear;
	color: #aab3cc;
	overflow: hidden;
	cursor: pointer;
	flex-shrink: 0;
	flex-grow: 0;
	border-radius: 8px;
	border: 1px solid #2e344b44;

	&:hover
	{
		background-color: #1e1f28cc;
		border: 1px solid #08f;
		color: white;
	}
}

.icon
{
	flex-shrink: 0;
	flex-grow: 0;
	aspect-ratio: 1;
	background-size: cover;
	background-position: center;
	border-radius: 0 8px 8px 0;
}

.content
{
	flex-direction: column;
	flex-grow: 1;
	padding: 0.5rem 1rem;
	justify-content: center;
}

.header
{
	flex-direction: row;
	font-size: 1rem;
	pointer-events: none;
	width: 100%;
	gap: 0.5rem;
	justify-content: center;

	.title
	{
		flex-grow: 1;
		overflow: hidden;
		white-space: nowrap;
		font-weight: 700;
	}
}

.meta
{
	flex-direction: row;
	pointer-events: none;
	border-radius: 4px 4px 0 0;
	font-size: 0.9rem;
	gap: 0.5rem;
	align-items: center;

	.title
	{
		overflow: hidden;
		white-space: nowrap;
		font-weight: 400;
		opacity: 0.5;
	}

	.players
	{
		flex-shrink: 0;
		align-items: center;
		font-weight: 600;
		gap: 2px;
		color: #08f;

		.smaller
		{
			opacity: 0.4;
		}
	}
}

.head
{
	width: 18px;

	img
	{
		border-radius: 10px;
	}
}