$range-content-padding: 24px;

.range {
	position: relative;

	&.has-min-content {
		margin-left: $range-content-padding;
	}

	&.has-max-content {
		margin-right: $range-content-padding;
	}
}

.range__content {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-neutral-light);

	&.is-min {
		left: ( -1 * $range-content-padding );
	}

	&.is-max {
		right: ( -1 * $range-content-padding );
	}
}

.range__content > * {
	display: block;
}

.range__label {
	position: absolute;
	bottom: 100%;
	z-index: z-index("root", ".range__label");
	transform: translateX(-50%);
	padding-bottom: 5px;
	pointer-events: none;

	&::before {
		content: "";
		position: absolute;
		bottom: 1px;
		left: 50%;
		display: block;
		width: 8px;
		height: 8px;
		margin-left: -4px;
		transform: rotate(45deg);
		background-color: var(--color-surface);
		border-right: 1px solid var(--color-neutral-10) #{"/*rtl:ignore*/"};
		border-bottom: 1px solid var(--color-neutral-10) #{"/*rtl:ignore*/"};
	}
}

.range__label-inner {
	display: block;
	padding: 8px 12px;
	border: 1px solid var(--color-neutral-10);
	border-radius: 2px;
	background-color: var(--color-surface);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
