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

.settingspanel
{
	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: 640px;
		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
	{
		align-items: center;
		margin-bottom: 14px;

		.title
		{
			flex-grow: 1;
			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;
			}
		}

		.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 ); }
		}
	}

	.group
	{
		flex-direction: column;
		background-color: rgba( 255, 255, 255, 0.05 );
		border-radius: 18px;
		padding: 16px;
		margin-bottom: 12px;

		.grouptitle
		{
			font-size: 13px;
			letter-spacing: 3px;
			opacity: 0.5;
			margin-bottom: 10px;
		}

		&.danger .grouptitle { color: #e08a6a; opacity: 0.8; }
	}

	.row
	{
		align-items: center;
		padding: 8px 0px;

		.label
		{
			width: 240px;
			flex-direction: column;
			font-size: 16px;

			.sub
			{
				font-size: 12px;
				opacity: 0.55;
				margin-top: 2px;
			}
		}

		.value
		{
			width: 56px;
			font-size: 15px;
			text-align: right;
			opacity: 0.85;
		}

		// the base SliderControl
		.slidercontrol
		{
			flex-grow: 1;
			margin: 0px 14px;
			pointer-events: all;
		}
	}

	.toggle
	{
		cursor: pointer;
		pointer-events: all;
		border-radius: 12px;
		padding: 10px 8px;

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

		.label { flex-grow: 1; width: auto; }

		.switch
		{
			width: 56px;
			height: 30px;
			border-radius: 999px;
			background-color: rgba( 255, 255, 255, 0.14 );
			align-items: center;
			padding: 3px;
			transition: background-color 0.12s ease-out;

			.knob
			{
				width: 24px;
				height: 24px;
				border-radius: 100%;
				background-color: #cfd6e4;
				transition: all 0.12s ease-out;
			}
		}

		&.on .switch
		{
			background-color: #3aa7e0;
			justify-content: flex-end;

			.knob { background-color: white; }
		}
	}

	.resetbtn
	{
		padding: 10px 20px;
		border-radius: 12px;
		background-color: rgba( 255, 255, 255, 0.1 );
		font-size: 15px;
		font-weight: 700;
		cursor: pointer;
		pointer-events: all;
		margin-left: 8px;

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

		&.confirm
		{
			background-color: #c0533a;

			&:hover { background-color: #d9634a; }
		}
	}

	.resetrow { align-items: center; }

	.done
	{
		align-self: center;
		margin-top: 6px;
		padding: 14px 54px;
		border-radius: 16px;
		background-color: #3aa7e0;
		font-size: 20px;
		font-weight: 800;
		letter-spacing: 2px;
		cursor: pointer;
		pointer-events: all;
		border-bottom: 5px solid rgba( 0, 0, 0, 0.35 );

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