// =============================================================================
// :: Settings
// =============================================================================
$circles-width: 113rem;
$circles-height: 108rem;

// =============================================================================
// :: Highlight
// =============================================================================
.c-highlight {
	position: relative;
	z-index: 0;

	overflow: hidden;

	@include respond-at(get-breakpoint("tablet")) {
		padding: 12rem 0;

		text-align: center;
	}
}

// =============================================================================
// :: Elements
// =============================================================================
.c-highlight__title {
	position: relative;

	margin-bottom: 5.5rem;
	padding-bottom: 2.5rem;

	hyphens: auto;

	color: $text-color-base;

	&::after {
		content: "";

		position: absolute;
		left: 2.5rem;
		bottom: 0;

		width: 5rem;
		height: 0.5rem;

		border: none;
		border-radius: $border-radius-base;

		background-color: $purple;

		transform: translateX(-50%);

		@include respond-at(get-breakpoint("tablet")) {
			left: 50%;
		}
	}
}

.c-highlight__input-container {

	@include respond-at(get-breakpoint("tablet")) {
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
}

.c-highlight__input {
	flex-grow: 1;

	margin-bottom: 3.5rem;

	text-align: start;

	&:last-child {
		margin-bottom: 0;
	}

	@include respond-at(get-breakpoint("tablet")) {
		max-width: 35rem;
		margin-right: 4.5rem;
		margin-bottom: 0;

		&:last-child {
			margin-right: 0;
		}
	}
}

.c-highlight__button {
	margin-top: 4rem;

	@include respond-at(get-breakpoint("tablet")) {
		margin-top: 7rem;
	}
}

.c-highlight__background-container {
	position: absolute;
	top: -25%;
	left: calc(50vw - (#{$circles-width} / 2));
	z-index: -1;

	display: block;

	@include respond-at(get-breakpoint("mobile")) {
		top: -35%;
	}
}

.c-highlight__text {
	color: $text-color-base;
}

.c-highlight__info {
	margin-bottom: 25rem;

	@include respond-at(get-breakpoint("tablet")) {
		display: none;
	}
}

// =============================================================================
// :: Modifiers
// =============================================================================
.c-highlight--theme-green {

	.c-highlight__title {
		color: $secondary-color-purple;

		&::after {
			background-color: $background-color-purple;
		}
	}

	.c-highlight__text {
		color: $secondary-color-purple;
	}
}

.c-highlight--alternative {

	.c-highlight__title {
		text-align: left;

		&::after {
			left: 2.5rem;
		}
	}

	.c-highlight__info {
		display: block;
		margin-bottom: 0;

		text-align: left;
	}

	.c-highlight__form {
		text-align: left;
	}

	.c-highlight__input-container {
		flex-direction: column;
		align-items: flex-start;
	}

	.c-highlight__input {

		&:first-child {
			margin-bottom: 3rem;
		}
	}

	.c-highlight__background-container {
		top: calc(60% - #{$circles-height});

		@include respond-at(get-breakpoint("desktop")) {
			top: 0%;
			left: 70%;

			width: 30%;
			height: 100%;
			overflow: hidden;

			transform: translateX(-50%);
		}
	}

	.c-highlight__background {
		@include respond-at(get-breakpoint("desktop")) {
			top: -20rem;
		}
	}
}

.c-highlight--with-text {

	@include respond-at(get-breakpoint("tablet")) {
		display: block;
	}

	.c-highlight__info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 0;

		.c-highlight__text {
			max-width: 72rem;

			p {
				color: inherit;
			}
		}

		@include respond-at(get-breakpoint("tablet")) {
			align-items: center;
		}
	}
}

.c-highlight--text-color-white {

	.c-highlight__title {
		color: $text-color-light;

		&::after {
			background-color: $background-color-white;
		}
	}

	.c-highlight__info {

		.c-highlight__text {
			color: $text-color-light;
		}
	}
}