src/UXClient/Components/Slider/Slider.scss

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

@mixin sliderColors($grays){
    $gray1: nth($grays, 1); // text
    $gray3: nth($grays, 3);
    $gray4: nth($grays, 4); // text
    $gray6: nth($grays, 6); // text hover
   
    .tsi-sliderTrack {
        stroke: $gray1;
        @media screen and (-ms-high-contrast: white-on-black) { 
            stroke: white;              
        }
    }

    .tsi-sliderHandle{
        fill: white;	
        stroke: $gray6;
    }

    .tsi-sliderLabel {
        background: $gray3;
        color: $gray1;
    }
}

.tsi-sliderComponent {
    position: absolute;
    height: 55px;
    bottom: 0px;
    right: 0px;

	&.tsi-dark{
		$grays: grays('dark');
		@include sliderColors($grays);
	}
	&.tsi-light{
		$grays: grays('light');
		@include sliderColors($grays);
    }
    
    .tsi-sliderG {
        .tsi-sliderTrack {
            stroke-width: 1px;
        }
        .tsi-sliderTrackOverlay {
            pointer-events: stroke;
            stroke-width: 50px;
            stroke: transparent;
            cursor: pointer;
        }
        .tsi-sliderHandle{
            stroke-width: 1.5;
        }
    }
}

.tsi-sliderLabel {
    position: absolute;
    bottom: 5px;
    right: 0px;
    font-size: 11px;
}