src/UXClient/Components/Legend/Legend.scss

@import "../../styles";

@mixin legendColors($grays){
	$gray1: nth($grays, 1); // text
    $gray2: nth($grays, 2); // hover
    $gray3: nth($grays, 3); // element
    $gray4: nth($grays, 4); // background
	$gray5: nth($grays, 5); // alt element
    $gray6: nth($grays, 6);
	
	color: $gray1;
	fill: $gray1;
	path {
		stroke: $gray1;
	}

	&:not(.compact) {
		border-right: 1px solid $gray4;
	}

	.tsi-seriesLabel{
		.tsi-splitByContainer {
			.tsi-legendShowMore {
				color: $gray6;
				opacity: 1;
			}
		}
		.tsi-seriesNameLabel, .tsi-splitByContainer .tsi-splitByLabel {	
			fill: $gray1;
			color: $gray1;
			select {
				color: $gray1;
				opacity: .6;
				background-color: transparent;
				border: 1px solid transparent;
				option{
					background: $gray3;
				}
			}			
			&:hover, &.inFocus {
				color: $gray6;    
			}
			&.stickied {
				background-color: rgba($gray2, .4);
			}
		}
		.tsi-seriesNameLabel {
			border: none;
			background-color: transparent;
			&.shown {
				background-color: $gray3;
			}
		}			
	}
}

.tsi-legend {
	overflow-y: auto;
	overflow-x: hidden;
	height: calc(100% - 16px);
	padding-left: 8px;
	&.tsi-dark{
        $grays: grays('dark');
        @include legendColors($grays);
    }
    &.tsi-light{
        $grays: grays('light');
        @include legendColors($grays);
	}
	
	&.hidden {
		display: none;
	}
	&:not(.hidden) {
		display: block;
	}
	
	&.compact{
		margin-left: 20px;
		margin-right: 20px;
		top: 8px;
		height: 48px !important;
		width: calc(100% - 40px) !important;
		position: absolute;
		display: flex;
		justify-content: center;
		border-right: none;
		padding: 0;
		padding-left: 0px;

		.tsi-seriesLabel {
			overflow-y: hidden;
			overflow-x: hidden;
			&:hover {
				overflow-x: auto;
			}
			white-space: nowrap;
			flex-basis: auto;
			flex-shrink: 1;
		}

		.tsi-seriesLabel {
			border: none;
			padding: 0;
			text-align: center;
			margin: 4px;

			&:not(.shown) {
				border: none;
			}
			.tsi-seriesNameLabel{
				display: none;
			}
			select{
				display: none;
			}
			.tsi-splitByContainer {
				max-height: 140px;
				display: inline-block;

				.tsi-splitByLabel{
					display: inline-block;
					margin: 0 4px;
					padding: 0 4px 1px 4px;
					height: 20px;
					margin-top: 1px;
					overflow: hidden;
					.tsi-eyeIcon {
						display: none;
					}
					.tsi-colorKey{
						display: block;
						position: absolute;
						height: 10px;
						width: 10px;
						top: -3px;
						forced-color-adjust: none;
						&.tsi-eventsColorKey, &.tsi-categoricalColorKey {
							height: 12px;
							width: 12px;
							top: unset;
							margin-top: 4px;
							margin-left: 0px;
						}
					}
					.tsi-seriesName {
						max-width: 100px;
						margin-left: 16px;
						margin-right: 0px;
						text-align: left;
						width: initial;
						font-size: 12px;
					}
				}
			}
		}
	}

	&:not(.compact) {
		&.tsi-flexLegend {
			display: flex;
			flex-direction: column;	
		}

		height: 100%;
	
		.tsi-seriesLabel {
			
			.tsi-splitByContainer {

				.tsi-legendShowMore {
					background: none;
					border: none;
					visibility: visible;
					margin: 8px auto;
					cursor: pointer;
					&:hover{
						text-decoration: underline;
					}
				}
				overflow-y: auto;
				visibility: hidden;
				min-height: 42px;
				height: calc(100% - 25px);

				.tsi-splitByLabel,
				&:hover,
				&:focus {
					visibility: visible;
				}
			}
		}


		.tsi-seriesLabel {
			.tsi-seriesNameLabel .tsi-eyeIcon, .tsi-splitByContainer .tsi-splitByLabel .tsi-eyeIcon {
				display: block;
				background-size: 17px 11px;
				background-repeat: no-repeat;
    			background-position: center; 
				position: absolute;
				height: 100%;
				width: 17px;
				right: 17px;
			}
			.tsi-eyeIcon {
				display: inherit;
				cursor: pointer;
				border: none;
				background-color: transparent;
			}
		}

		&.tsi-light {

			.tsi-seriesLabel {
				.tsi-seriesNameLabel .tsi-eyeIcon, .tsi-splitByContainer .tsi-splitByLabel .tsi-eyeIcon {
					background-image: url(../../Icons/Eye_light_theme.svg);
					@media screen and (-ms-high-contrast: white-on-black) {  
						background-image: url(../../Icons/Eye_dark_theme.svg);          
					} 
				}
			}
		}

		&.tsi-dark {
			.tsi-seriesLabel {
				.tsi-seriesNameLabel .tsi-eyeIcon, .tsi-splitByContainer .tsi-splitByLabel .tsi-eyeIcon {
					background-image: url(../../Icons/Eye_dark_theme.svg);
				}
			}
		}
	}

	.tsi-seriesLabel .tsi-seriesNameLabel, .tsi-seriesLabel .tsi-splitByContainer .tsi-splitByLabel {
		&:not(.shown) {
			opacity:.3;
		}
		&.shown {
			opacity:1;
		}
	}

	.tsi-seriesLabel {
		margin: 8px;
		&.tsi-nsb{
			.tsi-splitByContainer{
				overflow-y: hidden;
			}
			.tsi-seriesNameLabel {
				display: none;
			}
		}
		.tsi-seriesNameLabel, .tsi-splitByContainer .tsi-splitByLabel {
			display: flex;
			&.tsi-nonCompactNonNumeric {
				flex-direction: row;
				align-items: center;	
			}
			h4, .tsi-seriesName {
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				margin-top: 2px;
				margin-bottom: 4px;
				font-weight: 400;
				margin-right: 36px;
			}

			h4 {
				cursor: pointer;
				font-weight: 600;
				font-size: 15px;
				font-family: "Segoe UI", sans-serif; 
			}

			.tsi-seriesName {
				cursor: default;
				overflow-x:hidden;
				text-overflow: ellipsis;
				font-size: 14px;
			}
			select {
				left: 20px;
				max-width: calc(100% - 64px);
				margin: 2px;
				border: none;
				position: absolute;
				top: 16px;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				padding: 2px;
				background-image: url(../../Icons/chevron.svg);
				background-repeat: no-repeat;
				background-position-x: calc(100% - 4px);
				background-position-y: 7px;
				background-size: 18px;
				padding-right: 28px;
			}
			select::-ms-expand { 
				display: none; /* remove default arrow on ie10 and ie11 */
			}

			&.tsi-splitByLabelCompact {
				height: 24px;
			}
		}
		.tsi-seriesNameLabel {
			svg {
				display: inline-block;
			}
			cursor: pointer;
			padding: 0 4px;
			position: relative;
			width: 100%;
			select{
				height: 17px;
				width: 50px;
				position: absolute;
				right: 4px;
				top: 6px;
				display: none;
			}
		}
		.tsi-splitByContainer .tsi-splitByLabel {
			font-size: 16px;
			padding: 0 4px;
			position: relative;
			height: 40px;
			border-radius: 3px;

			&.hidden {
				height:0px;
				display: none;
				padding: 0;
			}
		}

		.tsi-seriesNameLabel, .tsi-splitByContainer .tsi-splitByLabel {
			.tsi-colorKey {
				flex-shrink: 0;
				width: 12px;
				height: 12px;
				margin-top: 8px;
				margin-right: 8px;
				border-radius: 6px;
				position: relative;
				top: -2px;
				forced-color-adjust: none;
				&.tsi-eventsColorKey, &.tsi-categoricalColorKey {
					height: 16px;
					width: 16px;
					margin-top: unset;
				}
			}
		}

		.tsi-seriesTypeLabel {
			margin: 0;
			cursor: pointer;
			font-weight: normal;
			padding-left: 8px;
			
			&.disabled {
				display: none;
			}
		}
	}
}