@import "ui-kit/variables";
@import "ui-kit/mixins";

.cherry-ui-container{
	margin: 10px 0 20px 0;
	.cherry-ui-container{
		margin: 0;
	}
}
label.cherry-label{
	margin: 0 0 5px 0;
	display: block;
}
.cherry-slider-wrap{
	display: flex;
	flex-wrap: wrap;
	.cherry-slider-input{
		flex: 0 1 10%;
		min-width: 100px;
		max-width: 200px;
	}
	.cherry-slider-holder{
		flex: 0 1 90%;
		min-width: 200px;
		max-width: 300px;
		margin-right: 20px;
			input[type=range] {
				-webkit-appearance: none;
				width: 100%;
				margin: 20px 0;
			}
			input[type=range]:focus {
				outline: none;
			}
			input[type=range]::-webkit-slider-runnable-track {
				width: 100%;
				height: 5px;
				cursor: pointer;
				box-shadow: none;
				background: $green_color;
				border-radius: 25px;
				border: none;
			}
			input[type=range]::-webkit-slider-thumb {
				box-shadow: 5px 5px 13px rgba(0, 0, 0, 0.18);
				border: 5px solid $green_color;
				height: 20px;
				width: 20px;
				margin-top: -7px;
				border-radius: 15px;
				background: $green_color;
				cursor: pointer;
				-webkit-appearance: none;
				transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1);
			}
			input[type=range]:focus::-webkit-slider-thumb {
				background: $grey_color_3;
				height: 28px;
				width: 28px;
				margin-top: -11.5px;
			}
			input[type=range]:hover::-webkit-slider-thumb {
				background: $grey_color_3;
				height: 28px;
				width: 28px;
				margin-top: -11.5px;
			}
			input[type=range]:focus::-webkit-slider-runnable-track {
				background: $green_color;
			}
			input[type=range]::-moz-range-track {
				width: 100%;
				height: 5px;
				cursor: pointer;
				box-shadow: none;
				background: $green_color;
				border-radius: 25px;
				border: none;
			}
			input[type=range]::-moz-range-thumb {
				box-shadow: none;
				border: none;
				height: 28px;
				width: 28px;
				border-radius: 15px;
				background: $green_color;
				cursor: pointer;
			}
			input[type=range]::-ms-track {
				width: 100%;
				height: 10px;
				cursor: pointer;
				background: $grey_color_3;
				border-color: transparent;
				color: transparent;
			}
			input[type=range]::-ms-fill-lower {
				background: $grey_color_3;
				border: none;
				border-radius: 50px;
				box-shadow: none;
			}
			input[type=range]::-ms-fill-upper {
				background: $green_color;
				border: none;
				border-radius: 50px;
				box-shadow: none;
			}
			input[type=range]::-ms-thumb {
				box-shadow: none;
				border: none;
				height: 10px;
				width: 10px;
				border-radius: 15px;
				background: #495159;
				cursor: pointer;
			}
			input[type=range]:focus::-ms-fill-lower {
				background: $grey_color_3;
			}
			input[type=range]:focus::-ms-fill-upper {
				background: $green_color;
			}
	}
	.cherry-input{
		margin: 0;
		width: 100%;
	}
}