@mixin slider-thumb () {
	appearance: none;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border:none;
	background: #4CAF50;
	cursor: pointer;
}
@mixin slider-track () {
	width: 100%;
	height: 5px;
	cursor: pointer;
	animate: 0.2s;
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	background: gray;
	border-radius: 25px;
	border: 0px solid #000101;
}

.vui-slider {
	&__container {
		width: 100%;
		padding: 0.5em 0 1em;
		box-sizing: border-box;

		& input[type="range"] {
			width: 100%;
			margin: 10px 0;
			padding: 0;
			-webkit-appearance: none;

			&::-webkit-slider-runnable-track {
				@include slider-track();
			}

			&::-moz-range-track {
				@include slider-track();
			}

			&::-ms-track {
				@include slider-track();
			}

			&::-webkit-slider-thumb {
				-webkit-appearance: none;
				margin-top: -10px;
				@include slider-thumb();
			}
			
			&::-moz-range-thumb {
				@include slider-thumb();
			}
	
			&::-ms-thumb {
				@include slider-thumb();
			}
		}
	}

	&__axis {
		display: block;
		text-align: center;

		&:first-child {
			text-align: left;
		}

		&:last-child {
			text-align: right;
		}

		&-container {
			position: relative;
			display: flex;
		}

		&--with-content {
			cursor: default;
			border-right: 3px dotted #f7f7f7;
		}
	}
}