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

#profile {
	border: 0;
	border-radius: 0;
	margin-top: 0;
	background-color: var(--theme-background-2);
	padding: 20px;
	color: var(--theme-text-1);
	width: 98%;

	.profile-picture {
		width: 70px;
		height: 95px;
		position: absolute;
		left: 318px;
		top: 5px;
		background-size: 70px;
		background-repeat: no-repeat;
	}

	@for $i from 0 through 120 {
		.profile-picture.elo#{$i} {
			box-shadow: 0 0 5px 2px calcEloCol($i * 5+1500) !important;
		}
	}
	@for $i from 1 through 5 {
		.profile-picture.experienced#{$i} {
			box-shadow: 0 0 5px 2px rgb(0, (175 - ($i * 20)), 0) !important;
		}
	}
	@for $i from 1 through 10 {
		.profile-picture.onfire#{$i} {
			box-shadow: 0 0 5px 2px rgb(183, (10 - $i) * 15, 167) !important;
		}
	}

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

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

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

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

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

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

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

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

	.blacklist-button {
		background: $blacklist;
		position: absolute;
		top: 15px;
		left: 415px;
	}

	.ui.menu {
		border-radius: 0.28571429rem 0.28571429rem 0em 0em !important;
		border: 1px solid var(--theme-text-2) !important;
	}

	.column-name {
		display: flex;
		align-items: flex-start;

		h2 {
			display: inline-block;
			margin-bottom: 0;
			margin-right: 10px;
		}
	}

	.not-found {
		position: relative;
		top: 150px;
	}
	.recent-games-table + table tbody tr {
		cursor: pointer;
	}

	.edit.icon {
		cursor: pointer;
		font-size: 24px;
	}

	textarea {
		width: 100%;
		flex-grow: 1;
		background: var(--theme-text-1);
		resize: none;
		color: var(--theme-background-2);
		min-height: 60px;
		margin-bottom: 10px;
	}

	.bio + p {
		margin-bottom: 10px;
	}
}

.breakAll {
	word-wrap: break-word !important;
}

.profile {
	> .fav {
		background: url('../../public/favicon-16x16.png') no-repeat center center;
		width: 16px;
		height: 16px;
		vertical-align: text-bottom;
	}
	> .rainbow {
		background: url('../../public/images/rainbow.png') no-repeat center center;
		width: 16px;
		height: 16px;
		vertical-align: text-bottom;
	}
	> .private {
		background: url('../../public/images/private.png') no-repeat center center;
		width: 16px;
		height: 16px;
		vertical-align: text-bottom;
	}
}

.collapsable {
	padding-bottom: 7px;
}

.newbadge {
	text-shadow: 2px 2px 8px var(--theme-primary);
}
