//
// RD Range
//

.rd-range {
	display: flex;
	align-items: center;
	height: 18px;
	margin-top: 25px;

	&__wrap {
		position: relative;
		width: calc(100% - 20px);
		margin-left: 10px;
		height: 6px;
		background-color: $gray-11;
		transition: background 100ms cubic-bezier(0.23, 1, 0.32, 1);

		&::before,
		&::after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			background: inherit;
			width: 10px;
		}

		&::before {
			left: -10px;
		}

		&::after {
			right: -10px;
		}
	}

	&:hover {
		.rd-range__pointer {
			&:before {
				transform: scale(1);
				animation-name: pulse;
			}
		}
	}

	// Range Pointer
	&__pointer {
		position: absolute;
		top: 1px;
		left: 6%;
		z-index: 1;
		width: 20px;
		height: 20px;
		margin-left: -10px;
		cursor: pointer;
		border: 2px solid $primary;
		border-radius: 50%;
		transform-origin: 0 15%;
		transform: translate(-50%, -50%);
		transition: transform .2s cubic-bezier(.35, 0, .25, 1);
		overflow: visible;
		background-color: $white;

		&::after {
			content: '';
			position: absolute;
			top: 5px;
			left: 5px;
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: $primary;
		}
	}

	// Range line
	&__line {
		background-color: #99b3cd;
		position: absolute;
		top: 0;
		left: 0;
		height: 6px;
	}

	// Range with tooltip
	&.hasTooltip {
		.rd-range__pointer-tooltip {
			position: absolute;
			bottom: 100%;
			margin-bottom: 8px;
			padding: 5px;
			background: $primary;
			font-size: 12px;
			line-height: 1.2;
			font-weight: 500;
			color: $white;
			box-shadow: 0 0 3px 0 rgba($black, .2);

			&::before {
				content: '';
				position: absolute;
				bottom: -6px;
				width: 0;
				height: 0;
				border-style: solid;
			}
		}

		.rd-range__pointer {
			position: absolute;
			top: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 28px;
			transform: translate3d(0, -50%, 0);
			transition: transform .3s cubic-bezier(.35, 0, .25, 1);

			&.active,
			&:hover {
				z-index: 2;
			}
      
      &.active:first-child {
        z-index: 5;
      }
			
			&.active:hover {
				z-index: 4;
			}
		}

		.rd-range__pointer-1 {
			.rd-range__pointer-tooltip {
				left: 0;
				&::before {
					left: 0;
					border-width: 6px 8px 0 0;
					border-color: $primary transparent transparent transparent;
				}
			}
		}

		.rd-range__pointer-2 {
			.rd-range__pointer-tooltip {
				right: 0;
				&::before {
					right: 0;
					border-width: 0 8px 6px 0;
					border-color: transparent $primary transparent transparent;
				}
			}
		}
	}
}

%context-dark {
	.rd-range__wrap {
		background: $lightblue;
	}

	.rd-range__line {
		background: $darkblue-3;
	}

	.rd-range {
		&.hasTooltip {
			.rd-range__pointer-tooltip {
				background: $darkblue-3;
			}

			.rd-range__pointer {
				border-color: $darkblue-3;

				&::after {
					background: $darkblue-3;
				}
			}

			.rd-range__pointer-1 {
				.rd-range__pointer-tooltip {
					&::before {
						border-color: $darkblue-3 transparent transparent transparent;
					}
				}
			}

			.rd-range__pointer-2 {
				.rd-range__pointer-tooltip {
					&::before {
						border-color: transparent $darkblue-3 transparent transparent;
					}
				}
			}
		}
	}
}


//
// RD Range Outer
//
.rd-range-outer {
	display: flex;
	color: $gray-1;

	.rd-range {
		padding-top: 45px;
		margin-top: 0;
	}

	@media (max-width: 479px) {
		flex-direction: column-reverse;

		> * + * {
			margin-bottom: 16px;
		}
	}

	@media (min-width: 480px) {
		align-items: flex-end;

		.rd-range {
			flex-grow: 1;
		}

		.rd-range-caption {
			position: relative;
			bottom: -8px;
		}

		> * + * {
			margin-top: 0;
			margin-left: 20px;
		}
	}
}

.rd-range-caption {
	min-width: 120px;
}

%context-dark {
	.rd-range-outer {
		color: $white;
	}
}

* + .rd-range-outer { margin-top: 20px; }
.row + .rd-range-outer { margin-top: 11px; }
.rd-range-outer + hr { margin-top: 20px; }

@include media-breakpoint-up(sm) {
	* + .rd-range-outer { margin-top: 25px; }
	.form-wrap + .rd-range-outer { margin-top: 16px; }
}

@include media-breakpoint-up(md) {
	.rd-range-outer + hr { margin-top: 30px; }
}