$eloValues: (1500 0.3 1 0.3) (1600 0.3 1 0.5) (1849 0 1 0.7) (1850 1 1 0.7) (1900 0.9 1 0.6) (2000 0.8 1 0.4) (2100 0.7 1 0.5);

@function lerp($low, $high, $elo) {
	$scale: nth($high, 1) - nth($low, 1);
	@if $scale <= 0 {
		@return hsl(nth($low, 2) * 360, nth($low, 3) * 100, nth($low, 4) * 100);
	}
	$lerp: ($elo - nth($low, 1)) / $scale;
	@if $lerp < 0 {
		$lerp: 0;
	}
	@if $lerp > 1 {
		$lerp: 1;
	}
	@return hsl(
		((nth($low, 2) * (1-$lerp)) + (nth($high, 2) * $lerp)) * 360,
		((nth($low, 3) * (1-$lerp)) + (nth($high, 3) * $lerp)) * 100,
		((nth($low, 4) * (1-$lerp)) + (nth($high, 4) * $lerp)) * 100
	);
}

@function calcEloCol($elo) {
	$low: nth($eloValues, 1);
	$high: nth($eloValues, -1);
	@for $i from 1 through length($eloValues) {
		$val: nth($eloValues, $i);
		$val2: nth($val, 1);
		@if $val2 > nth($low, 1) {
			@if $val2 <= $elo {
				$low: $val;
			}
		}
		@if $val2 < nth($high, 1) {
			@if $val2 >= $elo {
				$high: $val;
			}
		}
	}
	@return lerp($low, $high, $elo);
}

.players-container {
	border-top: 1px solid var(--theme-background-3);
}

.players-container .players {
	background-color: var(--theme-background-1);
	overflow: hidden;
	display: flex;
	margin-top: 5px;
	padding-top: 5px;
	> .label {
		width: 50px;
		height: 65px;
		margin: 28px 10px 0 10px;
		font-size: 16px;
		padding: 6px;
		text-align: center;
		cursor: pointer;
		&.tourny {
			width: 130px;
			margin: 32px 0 0 10px;
			padding: 15px;
			background: $tourny;
		}
	}
	@for $i from 0 through 120 {
		.player-container.elo#{$i} {
			box-shadow: 0 0 5px 2px calcEloCol($i * 5+1500) !important;
		}
	}
	@for $i from 1 through 5 {
		.player-container.experienced#{$i} {
			box-shadow: 0 0 5px 2px rgb(0, (175 - ($i * 20)), 0) !important;
		}
	}
	@for $i from 1 through 10 {
		.player-container.onfire#{$i} {
			box-shadow: 0 0 5px 2px rgb(183, (10 - $i) * 15, 167) !important;
		}
	}

	.player-container.contributor {
		box-shadow: 0 0 5px 2px #21bae0 !important;
	}

	.player-container.admin {
		box-shadow: 0 0 5px 2px red !important;
	}

	.player-container.editorcolor {
		box-shadow: 0 0 5px 2px #05bba0 !important;
	}

	.player-container.moderatorcolor {
		box-shadow: 0 0 5px 2px #007fff !important;
	}

	.player-container.veteran {
		box-shadow: 0 0 5px 2px #84b8fd !important;
	}

	.player-container.moira {
		box-shadow: 0 0 5px 2px #ff95fb !important;
	}

	.player-container.godhemzelve {
		box-shadow: 0 0 5px 2px #beedc8 !important;
	}

	.player-container.vig {
		box-shadow: 0 0 5px 2px #ab85ff !important;
	}

	.player-container.carl {
		box-shadow: 0 0 5px 2px #726EFF !important;
	}

	.player-container.rose {
		box-shadow: 0 0 5px 2px #fe7f9c !important;
	}

	.player-container {
		user-select: none;
		max-width: 70px;
		min-width: 25px;
		height: 95px;
		margin: 18px 0.5% 0;
		border-radius: 4px;
		background-image: url('../../public/images/tweed.png');
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		flex: 1;

		.playernote {
			font-size: 18px;
			color: var(--theme-primary) !important;
			position: absolute;
			top: 2px;
			right: -4px;
			cursor: pointer;
			z-index: 100;

			&.has-note {
				color: orange !important;
			}
		}

		.player-number {
			cursor: pointer;
			overflow: hidden;
			white-space: nowrap;
			margin-top: -21px;
			font-family: $headerfont;
			color: var(--theme-text-2);
			text-align: center;
			font-size: 13px;
			&:hover {
				color: yellow;
			}
		}
		.player-number.seated-user {
			color: #16ab39;
		}
		.government-token {
			width: 100%;
			height: 23px;
			top: 72px;
			position: absolute;
			z-index: 1;
		}
		.previous-government-token {
			top: 0;
			opacity: 0.2;
		}
		.government-token.isPendingPresident,
		.government-token.isPendingChancellor {
			animation: fadeIn 1.5s infinite alternate;
		}
		.government-token.isPendingPresident,
		.government-token.isPresident,
		.government-token.wasPresident {
			background-image: url('../../public/images/president-token.png');
		}
		.government-token.isPendingChancellor,
		.government-token.isChancellor,
		.government-token.wasChancellor {
			background-image: url('../../public/images/chancellor-token.png');
		}
		.card-container {
			width: 100%;
			height: 95px;
			top: 100px;
			left: 0;
			transition-duration: 1s;
			transition-property: transform, top;
			transform-style: preserve-3d;
			position: relative;
			.card {
				background-size: cover;
				background-repeat: no-repeat;
				position: absolute;
				top: 0;
				left: 0;
				height: 95px;
				width: 100%;
			}
			.card.secretrole {
				background-image: url('../../public/images/cards/secretrole.png');
			}
			.card.liberal0 {
				background-image: url('../../public/images/cards/liberal0.png');
			}
			.card.liberal1 {
				background-image: url('../../public/images/cards/liberal1.png');
			}
			.card.liberal2 {
				background-image: url('../../public/images/cards/liberal2.png');
			}
			.card.liberal3 {
				background-image: url('../../public/images/cards/liberal3.png');
			}
			.card.liberal4 {
				background-image: url('../../public/images/cards/liberal4.png');
			}
			.card.liberal5 {
				background-image: url('../../public/images/cards/liberal5.png');
			}
			.card.merlin {
				background-image: url('../../public/images/cards/merlin.png');
			}
			.card.percival {
				background-image: url('../../public/images/cards/percival.png');
			}
			.card.monarchist {
				background-image: url('../../public/images/cards/monarchist.png');
			}
			.card.fascist0 {
				background-image: url('../../public/images/cards/fascist0.png');
			}
			.card.fascist1 {
				background-image: url('../../public/images/cards/fascist1.png');
			}
			.card.fascist2 {
				background-image: url('../../public/images/cards/fascist2.png');
			}
			.card.fascist3 {
				background-image: url('../../public/images/cards/fascist3.png');
			}
			.card.fascist4 {
				background-image: url('../../public/images/cards/fascist4.png');
			}
			.card.fascist5 {
				background-image: url('../../public/images/cards/fascist5.png');
			}
			.card.fascist6 {
				background-image: url('../../public/images/cards/fascist6.png');
			}
			.card.fascist7 {
				background-image: url('../../public/images/cards/fascist7.png');
			}
			.card.fascist8 {
				background-image: url('../../public/images/cards/fascist8.png');
			}
			.card.fascist9 {
				background-image: url('../../public/images/cards/fascist9.png');
			}
			.card.fascist10 {
				background-image: url('../../public/images/cards/fascist10.png');
			}
			.card.fascist11 {
				background-image: url('../../public/images/cards/fascist11.png');
			}
			.card.fascist12 {
				background-image: url('../../public/images/cards/fascist12.png');
			}
			.card.fascist13 {
				background-image: url('../../public/images/cards/fascist13.png');
			}
			.card.fascist14 {
				background-image: url('../../public/images/cards/fascist14.png');
			}
			.card.fascist15 {
				background-image: url('../../public/images/cards/fascist15.png');
			}
			.card.fascist16 {
				background-image: url('../../public/images/cards/fascist16.png');
			}
			.card.fascist17 {
				background-image: url('../../public/images/cards/fascist17.png');
			}
			.card.fascist18 {
				background-image: url('../../public/images/cards/fascist18.png');
			}
			.card.fascist19 {
				background-image: url('../../public/images/cards/fascist19.png');
			}
			.card.fascist20 {
				background-image: url('../../public/images/cards/fascist20.png');
			}
			.card.hitler0 {
				background-image: url('../../public/images/cards/hitler0.png');
			}
			.card.hitler1 {
				background-image: url('../../public/images/cards/hitler1.png');
			}
			.card.hitler2 {
				background-image: url('../../public/images/cards/hitler2.png');
			}
			.card.hitler3 {
				background-image: url('../../public/images/cards/hitler3.png');
			}
			.card.hitler4 {
				background-image: url('../../public/images/cards/hitler4.png');
			}
			.card.hitler5 {
				background-image: url('../../public/images/cards/hitler5.png');
			}
			.card.hitler6 {
				background-image: url('../../public/images/cards/hitler6.png');
			}
			.card.ballot {
				background-image: url('../../public/images/cards/ballot.png');
			}
			.card.ja {
				background-image: url('../../public/images/cards/ja.png');
			}
			.card.nein {
				background-image: url('../../public/images/cards/nein.png');
			}
			.card.partymembership {
				background-image: url('../../public/images/cards/partymembership.png');
			}
			.card.membership-liberal {
				background-image: url('../../public/images/cards/membership-liberal.png');
			}
			.card.membership-fascist {
				background-image: url('../../public/images/cards/membership-fascist.png');
			}
			.card-back {
				backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-moz-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				-o-backface-visibility: hidden;
				transform: rotateY(180deg);
			}
			.card-front {
				backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-moz-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				-o-backface-visibility: hidden;
			}
			.blacklist {
				top: -100px !important;
				position: absolute !important;
				z-index: 99999 !important;
				color: var(--theme-background-3);
				right: -5px !important;

				&:hover {
					color: var(--theme-background-3);
				}
			}
		}
		.card-container.showing {
			// prevents 1px gap showing below card
			top: 1px;
		}
		.card-container.flipped {
			transform: rotateY(180deg);
		}
		.player-number.leftgame {
			opacity: 0.3;
		}
		.player-number.disconnected {
			opacity: 0.6;
		}
		.player-name.liberal,
		.player-number.liberal {
			color: #608cb3;
		}
		.player-name.merlin,
		.player-number.merlin {
			color: $merlin;
		}
		.player-name.percival,
		.player-number.percival {
			color: $percival;
		}
		.player-name.fascist,
		.player-number.fascist {
			color: #c36563;
		}
		.player-name.hitler,
		.player-number.hitler {
			color: #be0804;
		}
		.player-name.morgana,
		.player-number.morgana {
			color: $morgana;
		}
		.player-name.monarchist,
		.player-number.monarchist {
			color: $monarchist;
		}
		.player-name.merlin_candidate,
		.player-number.merlin_candidate {
			color: #39942b;
		}
	}
	.player-container.isDead {
		background-image: url('../../public/images/deadplayer.png') !important;
	}
	.notifier::after {
		content: '';
		width: 100%;
		height: 95px;
		top: 0;
		left: 0;
		position: absolute;
		animation: fadeIn 0.6s infinite alternate;
		cursor: pointer;
	}
	.player-container.fascist::after {
		box-shadow: 0 0 4px 4px #c36563;
	}
	.player-container.hitler::after,
	.player-container.danger::after {
		box-shadow: 0 0 4px 4px #be0804;
	}
	.player-container.liberal::after {
		box-shadow: 0 0 4px 4px #608cb3;
	}
	.player-container.notification::after {
		box-shadow: 0 0 4px 4px #fbbd08;
	}
	.player-container.success::after {
		box-shadow: 0 0 4px 4px #2185d0 inset;
		cursor: auto;
	}
}

.players-container .policies-container {
	max-width: 164px;
	min-width: 36px;
	height: 115px;
	margin-right: 125px;
	margin-left: auto;
	flex: 1;
	> div {
		width: 50%;
		height: inherit;
		display: inline-block;
		position: relative;
	}
	.card-count {
		position: absolute;
		z-index: 1;
		background-color: var(--theme-background-3);
		color: var(--theme-text-2);
		width: 18px;
		text-align: center;
		top: 0;
		left: 0;
	}
	.policy-card {
		width: 85%;
		height: 95px;
		background: url('../../public/images/cards/policy.png') no-repeat;
		position: absolute;
		top: 5px;
		left: 6px;
		transition: 1s all;
		box-shadow: 0px 0px 1px 0px #d7d7d7;
	}
	.policy-card.offscreen {
		top: 120px;
	}
	.draw {
		background: url('../../public/images/cards/draw.png') no-repeat;
	}
	.discard {
		background: url('../../public/images/cards/discard.png') no-repeat;
	}
	.notifier::after {
		content: '';
		width: 100%;
		height: 115px;
		top: 0;
		left: 0;
		position: absolute;
		animation: fadeIn 0.6s infinite alternate;
		cursor: pointer;
		box-shadow: 0 0 4px 8px #fbbd08 inset;
	}
}

.players-container.disabledrightsidebar .players > div > .roles {
	margin: 9px 0px 9px 36px;
}

.experienced .players-container .players {
	.card-container {
		transition-duration: 0.2s;
	}
}

.experienced .players-container .policies-container .policy-card {
	transition: 0.2s all;
}

.reportmodal {
	background-color: var(--theme-background-1) !important;
	padding: 20px;

	.dropdown {
		width: 100%;
		margin-bottom: 10px;
	}

	textarea {
		color: var(--theme-text-2);
		background-color: var(--theme-background-1);
		display: block;
		width: 100%;
		height: 60px;
		margin-bottom: 10px;
	}
}

.counter {
	position: absolute;
	right: 20px;
	padding: 0;
	margin: 0;
	font-size: 12pt;
	user-select: none;
}

.error {
	color: red;
}

.user-popup::before {
	visibility: hidden;
}
