/* Native range sliders for calculator — match ion.rangeSlider look */
.potential__calc-field-slider {
	margin-top: 0.5rem;
}

.calc-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 1.375rem;
	background: transparent;
	outline: none;
	cursor: pointer;
	margin: 0.5rem 0 0.25rem;
}

.calc-range::-webkit-slider-runnable-track {
	height: 0.375rem;
	border-radius: 62.4375rem;
	background-color: hsla(0, 0%, 100%, 0.12);
	background-image: linear-gradient(90deg, #ff3d9a, #b44dff 55%, #4de8ff);
	background-size: var(--fill, 0%) 100%;
	background-repeat: no-repeat;
}

.calc-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1.375rem;
	height: 1.375rem;
	margin-top: -0.5rem;
	border-radius: 50%;
	background: #ff6eb8;
	border: 0.125rem solid hsla(0, 0%, 100%, 0.86);
	box-shadow: 0 0.125rem 0.875rem rgba(255, 61, 154, 0.45);
	cursor: grab;
	position: relative;
	z-index: 1;
}

.calc-range::-webkit-slider-thumb:active {
	cursor: grabbing;
}

.calc-range::-moz-range-track {
	height: 0.375rem;
	border-radius: 62.4375rem;
	background-color: hsla(0, 0%, 100%, 0.12);
	background-image: linear-gradient(90deg, #ff3d9a, #b44dff 55%, #4de8ff);
	background-size: var(--fill, 0%) 100%;
	background-repeat: no-repeat;
	border: none;
}

.calc-range::-moz-range-thumb {
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 50%;
	background: #ff6eb8;
	border: 0.125rem solid hsla(0, 0%, 100%, 0.86);
	box-shadow: 0 0.125rem 0.875rem rgba(255, 61, 154, 0.45);
	cursor: grab;
}

.calc-range-meta {
	display: flex;
	justify-content: space-between;
	color: hsla(0, 0%, 100%, 0.48);
	font-size: 0.6875rem;
	font-weight: 500;
	margin-top: 0.25rem;
}