/*!
 * linkerWindow.css
 * Copyright 2017 - 2020 by ChartIQ, Inc.
 * All rights reserved.
 */

body .linkerContainer {
	margin: 0;
	border: 0;
	font-size: var(--menu-font-size);
	font-weight: var(--font-weight);
	overflow: hidden;
}

.linkerContainer {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.channel-wrapper {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	flex-direction: row-reverse;
	align-items: center;
	cursor: pointer;
	user-select: none;
	background-color: transparent;
	border-radius: 30px;
}

.channel-wrapper:hover,
.channel-wrapper:focus {
	background-color: var(--menu-content-hover-color);
}

.channel-label {
	padding-left: 4px;
	color: var(--menu-linker-selected-font-color);
}

/**
.linkerGroup is deprecated - used with LinkerMenuDeprecated
**/
.linkerGroup,
.linker-glyph {
	height: 20px;
	width: 20px;
	margin: 4px 12px 4px 8px;
	border-radius: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.channel1 .linker-glyph,
.linker-group.channel1 {
	background-color: #8781bd;
	border: 1px solid #797381;
}

.channel2 .linker-glyph,
.linker-group.channel2 {
	background-color: #ffe035;
	border: 1px solid #ffd803;
}

.channel3 .linker-glyph,
.linker-group.channel3 {
	background-color: #89d803;
	border: 1px solid #71ce47;
}

.channel4 .linker-glyph,
.linker-group.channel4 {
	background-color: #fe6262;
	border: 1px solid #f83b3b;
}

.channel5 .linker-glyph,
.linker-group.channel5 {
	background-color: #2dacff;
	border: 1px solid #039bff;
}

.channel6 .linker-glyph,
.linker-group.channel6 {
	background-color: #ffa200;
	border: 1px solid #f29a01;
}

.channel7 .linker-glyph,
.linker-group.channel7 {
	background-color: #3c1d5f;
	border: 1px solid #341853;
}

.channel8 .linker-glyph,
.linker-group.channel8 {
	background-color: #690f2d;
	border: 1px solid #5c0d27;
}

/* To reduce the number of channels in the linker simply hide them with CSS!
.channel6, .channel5 {
	display: none;
}
*/

/* If it's absolutely necessary to change the channel names, use this CSS pattern to do so.
 * The value in `content` will overwrite the actual channel name.
.channel4 .channel-label {
	visibility: hidden;
}


.channel4 .channel-label:after {
	content: "Red";
    display: block;
    visibility: visible;
    top: -10px;
    position: relative;
}
*/

.active-linker-group {
	color: var(--menu-linker-selected-font-color);
	font-size: var(--menu-linker-selected-font-size);
	margin: 2px 2px 0 0;
}
