$gold: #f5c542;
$panel: #1b2130;

.shoppanel
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	pointer-events: all;

	// Without this the HUD's nameplate and buttons paint straight through the sheet.
	z-index: 100;
	font-family: Poppins;
	color: white;

	.scrim
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba( 8, 10, 16, 0.65 );
		pointer-events: all;
	}

	.sheet
	{
		width: 760px;
		flex-direction: column;
		background-color: $panel;
		border-radius: 24px;
		padding: 22px;
		border-bottom: 6px solid rgba( 0, 0, 0, 0.4 );
		pointer-events: all;
		max-height: 90%;
		max-width: 92%;
	}

	.head
	{
		flex-shrink: 0;
		align-items: center;
		margin-bottom: 18px;

		.title
		{
			font-size: 26px;
			font-weight: 800;
			letter-spacing: 2px;
			align-items: center;

			i
			{
				font-family: Material Icons;
				font-size: 30px;
				margin-right: 10px;
				color: $gold;
			}
		}

		.wallet
		{
			flex-grow: 1;
			justify-content: flex-end;
			align-items: center;
			margin-right: 16px;

			.coin
			{
				width: 26px;
				height: 26px;
				border-radius: 100%;
				background-color: $gold;
				border: 3px solid #a8791a;
				margin-right: 8px;
			}

			.amount
			{
				font-size: 24px;
				font-weight: 700;
			}
		}

		.closebtn
		{
			width: 44px;
			height: 44px;
			border-radius: 12px;
			background-color: rgba( 255, 255, 255, 0.08 );
			align-items: center;
			justify-content: center;
			cursor: pointer;
			pointer-events: all;

			i { font-family: Material Icons; font-size: 24px; }

			&:hover { background-color: rgba( 255, 255, 255, 0.18 ); }
		}
	}

	.tracks
	{
		flex-direction: column;
		overflow-y: scroll;
		flex-shrink: 1;
	}

	.track
	{
		align-items: center;
		background-color: rgba( 255, 255, 255, 0.05 );
		border-radius: 18px;
		padding: 14px 16px;
		margin-bottom: 10px;
		border: 2px solid rgba( 0, 0, 0, 0 );
		flex-shrink: 0;

		.glyph
		{
			flex-shrink: 0;
			width: 62px;
			height: 62px;
			border-radius: 16px;
			background-color: rgba( 255, 255, 255, 0.08 );
			align-items: center;
			justify-content: center;
			margin-right: 16px;

			i
			{
				font-family: Material Icons;
				font-size: 32px;
				color: #8fd0ea;
			}
		}

		.info
		{
			flex-direction: column;
			flex-grow: 1;
			margin-right: 18px;

			.row { align-items: center; }

			.name
			{
				font-size: 20px;
				font-weight: 700;
			}

			.level
			{
				margin-left: 10px;
				font-size: 14px;
				background-color: rgba( 255, 255, 255, 0.1 );
				padding: 2px 10px;
				border-radius: 999px;

				.cap { opacity: 0.5; }
			}

			.desc
			{
				font-size: 14px;
				opacity: 0.7;
				margin-top: 2px;
			}

			.effect
			{
				font-size: 15px;
				color: #9fe0a0;
				margin-top: 5px;
			}
		}

		.buy
		{
			flex-shrink: 0;
			width: 150px;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 12px;
			border-radius: 14px;
			background-color: #3aa7e0;
			cursor: pointer;
			pointer-events: all;
			border-bottom: 4px solid rgba( 0, 0, 0, 0.35 );

			.buylabel { font-size: 18px; font-weight: 800; }
			.buycost { font-size: 14px; opacity: 0.9; }

			&:hover { transform: translateY( -2px ); }
			&:active { transform: translateY( 1px ); }

			&.disabled
			{
				background-color: #4a5162;
				opacity: 0.6;
				cursor: default;

				&:hover { transform: translateY( 0px ); }
			}

			&.maxedbtn
			{
				background-color: #4c8a52;
				cursor: default;
			}
		}

		&.afford
		{
			border-color: rgba( 245, 197, 66, 0.5 );
		}

		&.maxed .glyph i
		{
			color: #9fe0a0;
		}
	}

	.foot
	{
		flex-shrink: 0;
		margin-top: 6px;
		font-size: 13px;
		opacity: 0.55;
		justify-content: center;
	}
}

// ---------------------------------------------------------------- tabs

.shoppanel .tabs
{
	flex-shrink: 0;
	margin-bottom: 16px;

	.tab
	{
		align-items: center;
		padding: 10px 22px;
		margin-right: 10px;
		border-radius: 14px;
		background-color: rgba( 255, 255, 255, 0.05 );
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 1px;
		cursor: pointer;
		pointer-events: all;
		opacity: 0.6;

		i
		{
			font-family: Material Icons;
			font-size: 20px;
			margin-right: 8px;
		}

		&:hover { opacity: 0.9; }

		&.active
		{
			opacity: 1;
			background-color: rgba( 245, 197, 66, 0.18 );
			border-bottom: 3px solid $gold;
		}
	}
}

// swatch preview for a background
.shoppanel .track.bg
{
	.swatch
	{
		width: 108px;
		height: 68px;
		border-radius: 12px;
		margin-right: 16px;
		overflow: hidden;
		position: relative;
		border: 2px solid rgba( 255, 255, 255, 0.15 );

		.swatch-sun
		{
			position: absolute;
			top: 10px;
			right: 14px;
			width: 20px;
			height: 20px;
			border-radius: 100%;
			background-color: rgba( 255, 255, 255, 0.75 );
		}

		.swatch-dune
		{
			position: absolute;
			bottom: -14px;
			left: -10%;
			width: 120%;
			height: 34px;
			border-radius: 50%;
			background-color: rgba( 0, 0, 0, 0.22 );
		}
	}
}

// summary line above the worker roster
.shoppanel .crewline
{
	flex-shrink: 0;
	align-items: center;
	background-color: rgba( 127, 208, 111, 0.12 );
	border-radius: 12px;
	padding: 10px 16px;
	margin-bottom: 12px;
	font-size: 14px;

	i
	{
		font-family: Material Icons;
		font-size: 18px;
		margin-right: 10px;
		color: #7fd06f;
	}

	.crewtext { flex-grow: 1; }

	.crewcount
	{
		opacity: 0.7;
		margin-left: 12px;
	}
}

// someone you haven't taken on yet reads a little quieter
.shoppanel .track.unhired
{
	.glyph i { opacity: 0.55; }
	.name { opacity: 0.85; }
}