.root {
	display: grid;
	gap: 6px;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.label {
	@include typography.font-body-14(500);
	color: variables.$text-primary;
}

.value {
	@include typography.font-body-14(400);
	color: variables.$text-secondary;
	font-variant-numeric: tabular-nums;
}

.input {
	width: 100%;
	height: 6px;
	appearance: none;
	border-radius: 3px;
	cursor: pointer;
	background: linear-gradient(
		to right,
		variables.$color-success var(--fill-percent, 0%),
		variables.$border-default var(--fill-percent, 0%)
	);

	&::-webkit-slider-thumb {
		appearance: none;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: variables.$color-success;
		border: 2px solid #fff;
		box-shadow: variables.$shadow-sm;
		cursor: grab;
		transition: transform 0.15s ease;

		&:active {
			cursor: grabbing;
			transform: scale(1.15);
		}
	}

	&::-moz-range-thumb {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: variables.$color-success;
		border: 2px solid #fff;
		box-shadow: variables.$shadow-sm;
		cursor: grab;

		&:active {
			cursor: grabbing;
			transform: scale(1.15);
		}
	}

	&::-moz-range-track {
		height: 6px;
		border-radius: 3px;
		background: transparent;
	}
}

.helpText {
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	color: variables.$text-tertiary;
}
