.toolBar {
	position         : sticky;
	top              : 0;
	left             : 0;
	z-index          : 1;
	display          : flex;
	flex-wrap        : wrap;
	row-gap          : 5px;
	column-gap       : 15px;
	align-items      : center;
	justify-content  : center;
	width            : 100%;
	height           : 30px;
	font-family      : 'Open Sans', sans-serif;
	color            : white;
	text-align       : center;
	background-color : #555555;
	border-top       : 1px solid #666666;
	border-bottom    : 1px solid #666666;

	input {
		position       : relative;
		height         : 1.5em;
		padding        : 2px 5px;
		font-family    : 'Open Sans', sans-serif;
		font-size      : 16px;
		font-weight    : normal;
		color          : #000000;
		text-transform : uppercase;
		background     : #EEEEEE;
		border-radius  : 7px;

		&.slider {
			color: #D3D3D3;
			accent-color: #d3d3d3;
  
			&::-webkit-slider-thumb {
				width            : 8px; 
				height           : 15px;
				appearance       : none;
				cursor           : pointer; 
				background-color : rgb(39, 174, 96);
				translate        : 0 -66%; 
			}
			&::-moz-slider-thumb {
				width            : 8px; 
				height           : 15px;
				appearance       : none;
				cursor           : pointer; 
				background-color : rgb(39, 174, 96); 
			}

			&::before {
				position         : absolute;
				top              : 50%;
				left             : 33.33%;
				z-index          : -1;
				width            : 7px;
				height           : 15px;
				content          : '';
				background-color : #D3D3D3;
				transform        : translate(-50%, -50%);
			}
			
		}
	}

	.tool {
		&:hover .slider::after {
			position         : absolute;
			bottom           : -30px;
			left             : 50%;
			z-index          : 1;
			display          : grid;
			place-items      : center;
			width            : 4ch;
			height           : 1.2lh;
			pointer-events   : none;
			content          : attr(value);
			background-color : #D3D3D3;
			border           : 1px solid #A1A1A1;
			border-radius    : 5px;
			transform        : translate(-50%, 50%);
		}
	}

	.tool {
		display     : flex;
		align-items : center;
		height      : 100%;
		padding     : 0 8px;
		color       : #CCCCCC;

		&:hover,&:focus-within { background-color : #444444; }

		button {
			width            : 70px;
			padding          : 0;
			font-family      : 'Open Sans', sans-serif;
			font-size        : 11px;
			font-weight      : normal;
			color            : #CCCCCC;
			text-transform   : uppercase;
			background-color : transparent;

			&:focus-within {
				height      : 100%;
				font-weight : 800;
				color       : white;
			}

			&:disabled {
				color            : #777777;
				background-color : transparent !important;
			}
		}
	}
}