@import "/UI/Theme.scss";

ResourceSelectPopup .popup .inner
{
	width: 800px;
	height: 800px;

	.popup-header h2
	{
		flex-grow: 1;
	}

	.sort-buttons
	{
		flex-shrink: 0;
		flex-direction: row;
		gap: 2px;
		border-radius: 6px;
		overflow: hidden;

		.sort-button
		{
			font-size: 1.1rem;
			padding: 0.4rem 0.8rem;
			color: rgba( white, 0.5 );
			background-color: rgba( white, 0.05 );
			cursor: pointer;

			&:hover
			{
				color: white;
				background-color: rgba( white, 0.12 );
			}

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

ResourceSelectPopup .popup .inner .grid
{
	width: 100%;
	flex-grow: 1;
	gap: 1rem;
	background-color: #222a;
	padding: 1rem;
	border-radius: 10px;
}

ResourceSelectPopup .popup .inner .grid .item
{
	width: 100%;
	height: 100%;
	color: #aaa;
	pointer-events: all;
	border-radius: 10px;
	margin: 0.25rem;
	cursor: pointer;
	position: relative;
	flex-direction: column;
	padding: 1rem;
	font-size: 1rem;
	background-color: #0088ff02;

	.icon
	{
		height: 100px;
		font-size: 60px;
		overflow: hidden;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.title
	{
		font-weight: 700;
		font-size: 1.5rem;
		color: white;
		flex-shrink: 0;
	}

	.desc
	{
		overflow: hidden;
	}

	&:hover
	{
		background-color: #08f5;
	}

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