.input__range__wrapper {
	position: relative;
	display: flex;

	.input__range {
		-webkit-appearance: none;
		appearance: none;
		width: 100%;
		background: none;
		outline: none;
		border: none;
		z-index: 2;
		cursor: pointer;
	}

	.input__range__tooltip {
		position: absolute;
		top: 30px;
		transition: none;
		transform: translateX(-50%);
		box-shadow: 0px 4px 14px 0px #07072b59;
		padding: 9px 12px;

		p {
			font-size: 14px;
			font-weight: 500;
		}
	}

	.range__slider {
		height: 4px;
		width: 100%;
		position: absolute;
		transform: translateY(-50%);
		border-radius: 100px;
		top: 50%;
		z-index: 0;

		&.filled {
			background-color: #1f8feb;
			z-index: 1;
		}

		&.unfilled {
			background-color: var(--slider-bg-color);
		}
	}

	.markers {
		width: calc(100% - 10px);
		height: 10px;
		position: absolute;
		transform: translate(-50%, -50%);
		top: 50%;
		left: 50%;

		> div {
			height: 10px;
			width: 10px;
			border-radius: 100px;
			background-color: var(--slider-bg-color);
			position: absolute;
			top: 0;
			transform: translateX(-50%);
			z-index: 2;
			transition: none;

			&.selected {
				background-color: #1f8feb;
			}
		}
	}

	.input__range::-webkit-slider-thumb {
		-webkit-appearance: none;
		height: 20px;
		width: 20px;
		border-radius: 50%;
		background: #1f8feb;
		cursor: ew-resize;
		border: 2px solid var(--window-bg-color);
		transition: background 0.3s ease-in-out;
	}
}
