/* Slider */
input[type="range"].slider {
	-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
	appearance: none;
	width: 100%; /* Specific width is required for Firefox. */
	background: transparent; /* Otherwise white in Chrome */
	pointer-events: auto;
}
input[type="range"].slider::-webkit-slider-thumb {
	-webkit-appearance: none;
}

input[type="range"].slider:focus {
	outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type="range"].slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 1rem;
	width: 1rem;
	border-radius: 9999px;
	background-color: #fff;
	@apply cursor-pointer;
	margin-top: -5px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}
input[type="range"].slider::-webkit-slider-runnable-track {
	width: 100%;
	height: 0.5rem;
	@apply cursor-pointer;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 9999px;
}

input[type="range"].slider:focus::-webkit-slider-runnable-track {
	background: #367ebd;
}

input[type="range"].slider.zoom::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	height: 1.5rem;
	width: 1.5rem;
	border-radius: 9999px;
	border: 2px solid rgba(0, 0, 0, 0.36);
	--tw-bg-opacity: 1;
	background-color: rgba(107, 114, 128, var(--tw-bg-opacity));

	margin-top: 0px;
	cursor: pointer;
	/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
	--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	box-shadow:
		var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
input[type="range"].slider.zoom::-webkit-slider-runnable-track {
	width: 100%;
	height: calc(1.5rem + 4px);
	@apply cursor-pointer;
	box-shadow:
		1px 1px 1px #000000,
		0px 0px 1px #0d0d0d;
	background: rgba(0, 0, 0, 0.36);
	border-radius: 9999px;
	border: 2px rgba(255, 255, 255, 0.36) solid;
}

input[type="range"].slider.zoom:focus::-webkit-slider-runnable-track {
	background: rgba(255, 255, 255, 0.05);
}

.slider {
	display: flex;
}

.slider.horizontal {
	flex-direction: column;
}

.slider.vertical {
	height: 150px;
}

.label-container {
	display: flex;
	justify-content: space-between;
}
.label {
	display: block;
}

.slider.horizontal .track {
	height: 30px;
	width: calc(100% - 2rem);
	padding-left: 1rem;
	margin-left: 1rem;
}

/* track line */
.track:before {
	content: attr(x);
	display: block;
	position: absolute;
	background: gray;
}

.slider.horizontal .track:before {
	width: calc(100% + 2rem);
	margin-left: -2rem;
	top: 50%;
	transform: translateY(-50%);
	height: calc(1.5rem + 4px);
	@apply cursor-pointer;
	box-shadow:
		1px 1px 1px #000000,
		0px 0px 1px #0d0d0d;
	background: rgba(0, 0, 0, 0.36);
	border-radius: 9999px;
	border: 2px rgba(255, 255, 255, 0.36) solid;
}

.slider.vertical .track {
	width: 30px;
	height: 100%;
}

.slider.vertical .track:before {
	width: 3px;
	height: 100%;
	left: 50%;
	transform: translateX(-50%);
}

.thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: gray;
}

.thumb.dragging {
	background: dimgray;
}

.thumb.focus {
	background: orange;
}

.slider.horizontal .thumb {
	top: 50%;
}

.slider.vertical .thumb {
	left: 50%;
}

.track.disabled {
	opacity: 0.4;
}