/*****************************************/
/* Customizer control range style
/*****************************************/

/**
 * Import configuration file with variables.
 */
@import '../../../../assets/sass/config';

.blogsy-range-wrapper {
	.blogsy-control-wrap {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		box-sizing: border-box;
		margin-top: 12px;

		input[type=range],
		.blogsy-range-input,
		.blogsy-reset-range {
			flex: 1;
		}

	}

	input[type=range] {
		background-color: #ddd;
		height: 3px;
		padding: 0;
		margin: 0;
		cursor: pointer;
		transition: background .15s ease;
		border-radius: 3px;
		-webkit-appearance: none;

		&:focus {
			box-shadow: none !important;
			outline: none !important;
		}

		&:hover {
			background-color: rgba(0, 0, 0, 0.1);
		}

		&::-webkit-slider-thumb {
			-webkit-appearance: none;
			background-color: #2271b1;
			width: 15px;
			height: 15px;
			border: none;
			border-radius: 50%;
			transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;

			&:hover {
				background-color: #1d6197;
				box-shadow: 0 0 0 10px rgba(46, 134, 185, 0.12);
			}

			&:active {
				box-shadow: none;
				transform: scale(1.5);
				cursor: grabbing;
			}
		}

		&::-moz-range-track {
			border: inherit;
			background-color: transparent;
		}

		&::-ms-track {
			border: inherit;
			color: transparent;
			background-color: transparent;
		}

		&::-ms-fill-lower,
		&::-ms-fill-upper {
			background-color: transparent;
		}

		&::-ms-tooltip {
			display: none;
		}

		&::-moz-range-thumb {
			background-color: #2271b1;
			width: 15px;
			height: 15px;
			border: none;
			border-radius: 30px;
			transition: all .15s ease;

			&:hover {
				background-color: #1d6197;
				transform: scale(1.25);
			}
		}

		&::-ms-thumb {
			background-color: #2271b1;
			width: 15px;
			height: 15px;
			border: none;
			border-radius: 30px;
			transition: all .15s ease;

			&:hover {
				background-color: #1d6197;
				transform: scale(1.25);
			}
		}
	}

	.blogsy-range-input {
		max-width: 50px;
		height: 28px;
		text-align: center;
		font-size: 13px;
		border-radius: 3px;
		font-weight: 400;
		color: $color_3;
		-moz-appearance: textfield;
		margin-left: 6px !important;

		&::-webkit-outer-spin-button,
		&::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
	}

	.blogsy-reset-range {
		max-width: 16px;
		margin-left: 12px;
		display: inline-block;
		position: relative;
		line-height: 1;
		color: rgba(0, 0, 0, 0.2);
		cursor: pointer;
		text-align: center;

		&:hover {
			color: #f00;
		}

		span {
			width: 13px;
			height: 13px;
			font-size: 13px;
			line-height: 1;
		}
	}

	.blogsy-range-unit {
		margin-left: 6px;
		color: #555d66;
	}
}