.root {
	width: 100%;
}

.fields {
	display: grid;
	gap: 12px;
}

.actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 16px;
}

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

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

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

.rangeLabel {
	@include typography.font-body-14(500);
	color: variables.$text-primary;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

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

.rangeInput {
	width: 100%;
	accent-color: variables.$color-primary;
}
