.slider {
	position: relative;
	cursor: pointer;

	.track {
		position: absolute;
		background: rgba(255,255,255,0.3);
		@include animate()

		.progress {
			position: absolute;
			background: $turquoise;
			pointer-events: none;
			left: 0;
		}
	}

	&.horizontal {
		margin: 10px 0;
		height: 20px;

		.track {
			height: 2px;
			top: 9px;
			right: 0;
			left: 0;

			.progress {
				top: 0;
				height: 100%;
			}
		}
	}

	&.vertical {
		width: 20px;
		height: 100%;

		.track {
			width: 2px;
			top: 0;
			bottom: 0;
			left: 9px;

			.progress {
				bottom: 0;
				width: 100%;
			}
		}
	}
}