@import "/UI/Core/Styles/Colors.scss";

.scoreboard-tag-menu {
	position: absolute;
	z-index: 1000;
	background-color: rgba( 15, 15, 15, 0.95 );
	border: 0.5px solid rgba( 128, 128, 128, 1 );
	border-radius: 4px;
	box-shadow: 0px 2px 8px rgba( 0, 0, 0, 0.7 );
	overflow: hidden;
	flex-direction: column;
	// Anchor the top-middle of the menu to the cursor (Left/Top are set in C#).
	transform: translateX( -50% );

	.tag-menu-top {
		width: 100%;
		flex-direction: row;
		justify-content: center;
	}

	.tag-menu-row {
		flex-direction: column;
		width: 100%;
	}

	UIButton .ui-button.tag-item {
		width: 100%;
		padding: 3px 10px;
		text-align: left;
		white-space: nowrap;
		justify-content: flex-start;
		font-family: "Akshar-ContrastLight", "Akshar-Light", "Akshar", "Segoe UI", sans-serif;
		background-color: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		font-weight: 700;
		letter-spacing: 0.6px;
	}

	UIButton .ui-button.tag-item-clear {
		width: auto;
		padding: 0 6px;
		min-height: 0;
		height: 18px;
	}

	UIButton .ui-button.tag-item-clear > label {
		font-size: 10px;
		letter-spacing: 0.8px;
		text-transform: uppercase;
	}

	UIButton .ui-button.tag-item > label {
		font-size: 11px;
		font-family: "Akshar-ContrastLight", "Akshar-Light", "Akshar", "Segoe UI", sans-serif;
		font-weight: 700;
	}

	.tag-item-suspect label {
		color: rgb( 255, 115, 64 );
	}

	.tag-item-friend label {
		color: rgb( 102, 242, 128 );
	}

	.tag-item-avoid label {
		color: rgb( 255, 217, 51 );
	}

	.tag-item-kill label {
		color: rgb( 255, 51, 51 );
	}

	.tag-item-missing label {
		color: rgb( 166, 166, 179 );
	}

	.tag-item-clear label {
		color: rgba( 255, 255, 255, 0.55 );
	}

	UIButton .ui-button.tag-item:hover {
		background-color: rgba( 255, 255, 255, 0.06 );
	}
}