@import "ui-kit/variables";
@import "ui-kit/mixins";
@import "../../../../assets/sass/lock";

.cherry-ui-elements-lock{
	opacity: 0.5;
	cursor: no-drop;
	pointer-events: none;
	filter: grayscale( 100% );
}
.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: 10px;
			input[type=range] {
				-webkit-appearance: none;
				width: 100%;
				margin: 10px 0;
			}
			input[type=range]:focus {
				outline: none;
			}
			input[type=range]::-webkit-slider-runnable-track {
				width: 100%;
				height: 5px;
				cursor: pointer;
				box-shadow: none;
				background: #a4afb7;
				border-radius: 25px;
				border: none;
			}
			input[type=range]::-webkit-slider-thumb {
				box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
				height: 16px;
				width: 16px;
				margin-top: -6px;
				border-radius: 15px;
				background: white;
				cursor: pointer;
				-webkit-appearance: none;
				transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1);
			}
			input[type=range]:focus::-webkit-slider-runnable-track {
				background: #a4afb7;
			}
			input[type=range]::-moz-range-track {
				width: 100%;
				height: 5px;
				cursor: pointer;
				box-shadow: none;
				background: #a4afb7;
				border-radius: 25px;
				border: none;
			}
			input[type=range]::-moz-range-thumb {
				box-shadow: none;
				border: none;
				height: 16px;
				width: 16px;
				border-radius: 15px;
				background: #a4afb7;
				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%;
	}
}
