.rangeSlider {
	width: 100%;
	color: var(--c-fg-2);
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--font-sans);
	font-weight: bold;
	padding: var(--sp-2);
}

.rangeSlider [type="range"] {
	cursor: pointer;
	appearance: none;
	background: transparent;
	border-radius: var(--sp-2);
	height: var(--sp-3);
	flex: auto;

	&:focus {
		outline: 0;
	}

	&::-webkit-slider-runnable-track {
		width: 100%;
		height: var(--sp-2);
		border-radius: var(--sp-3);
		color: transparent;
		background: var(--c-bg-3);
		border: none;
	}
	&::-webkit-slider-thumb {
		height: var(--sp-3);
		width: var(--sp-3);
		border-radius: var(--sp-3);
		border: none;
		background: var(--c-fg-1);
		margin-top: calc(var(--sp-1) * -1);
		--webkit-appearance: none;
		appearance: none;
	}
	&:focus::-webkit-slider-thumb {
		outline-width: 2px;
		outline-style: solid;
		outline-color: var(--c-primary);
	}

	&::-moz-range-track {
		width: 100%;
		height: var(--sp-2);
		border-radius: var(--sp-3);
		color: transparent;
		background: var(--c-bg-3);
		border: none;
	}
	&::-moz-range-thumb {
		height: var(--sp-3);
		width: var(--sp-3);
		border-radius: var(--sp-3);
		border: none;
		background: var(--c-fg-1);
	}
	&:focus::-moz-range-thumb {
		outline-width: 2px;
		outline-style: solid;
		outline-color: var(--c-primary);
	}
}