/**
 * @package   CleverStyle Music
 * @category  Web Components
 * @author    Nazar Mokrynskyi <nazar@mokrynskyi.com>
 * @copyright Copyright (c) 2014-2015, Nazar Mokrynskyi
 * @license   MIT License, see license.txt
 */

:host {
	background : rgba(0, 0, 0, .5);
	display    : block;
	position   : relative;
}

cs-music-equalizer-levels-labels {
	display    : block;
	height     : 3rem;
	overflow   : hidden;
	padding    : 1rem;
	position   : absolute;
	text-align : center;
	width      : 100%;

	label {
		font-size : .9rem;
	}
}

// For very small screens
@media (max-width : 360px) {
	cs-music-equalizer-levels-labels label {
		font-size : .8rem;

		&:nth-of-type(2n+1) {
			margin-top : -.5rem;
		}

		&:nth-of-type(2n) {
			margin-top : .5rem;
		}
	}
}

cs-music-equalizer-levels {
	display  : flex;
	height   : calc(100vh - 8rem);
	margin   : 1rem;
	position : absolute;
	top      : 3rem;
	width    : calc(100% - 2rem);

	input {
		display : none;
	}

	.ranger {
		height : 100%;

		* {
			-webkit-user-select : none;
			-moz-user-select    : none;
			-ms-user-select     : none;
			-o-user-select      : none;
			user-select         : none;
		}

		.ranger-track {
			background    : #fff;
			border-radius : .1rem;
			box-shadow    : 0 0 .1rem #000;
			cursor        : pointer;
			height        : 100%;
			position      : relative;
			transform     : translateZ(0);
			width         : .3rem;
			z-index       : 2;

			.ranger-handle {
				display  : block;
				height   : 0;
				position : absolute;

				.ranger-disc {
					background    : #fff;
					border-radius : 100%;
					box-shadow    : 0 0 .1rem #000;
					cursor        : pointer;
					display       : block;
					height        : 1rem;
					margin        : 0 0 -.5rem -.4rem;
					transform     : translateZ(0);
					width         : 1rem;
					z-index       : 2;
				}
			}
		}
	}
}
