@import "../global.less";

.steps {
	--progress-steps-list-item-padding: 4.25rem 0 0 0;
	--progress-steps-list-item-padding-desktop-top: 4.25rem;
	--progress-steps-list-item-padding-desktop: var(
			--progress-steps-list-item-padding-desktop-top
		)
		0 1.2rem 0;
	--progress-steps-list-item-padding-desktop-vertical: 2rem 1.5rem 2rem 5.25rem;

	--progress-steps-circle-size: 30px;
	--progress-steps-circle-size-desktop: 40px;

	--progress-steps-vertical-left: 1.7rem;
	--progress-steps-vertical-margin: calc(
		(var(--progress-steps-circle-size-desktop) / 2) -
			(var(--progress-steps-line-width-desktop) / 2)
	);

	--progress-steps-line-width: 2px;
	--progress-steps-line-width-desktop: 2px;
}

// LESS vars still needed because used in LESS function .negative-margin()
@list-item-padding: 4.25rem 0 0 0;
@list-item-padding-desktop-top: 4.25rem;
@list-item-padding-desktop: @list-item-padding-desktop-top 0 1.2rem 0;
@list-item-padding-desktop-vertical: 2rem 1.5rem 2rem 5.25rem;

.negative-margin (@margin-list) {
	@length: length(@margin-list);

	& when (@length = 1) {
		margin: -@margin-list;
	}

	& when (@length = 2) {
		@top-bottom: extract(@margin-list, 1);
		@right-left: extract(@margin-list, 2);

		margin: -@top-bottom -@right-left;
	}

	& when (@length = 3) {
		@top: extract(@margin-list, 1);
		@right-left: extract(@margin-list, 2);
		@bottom: extract(@margin-list, 3);

		margin: -@top -@right-left -@bottom;
	}

	& when (@length = 4) {
		@top: extract(@margin-list, 1);
		@right: extract(@margin-list, 2);
		@bottom: extract(@margin-list, 3);
		@left: extract(@margin-list, 4);

		margin: -@top -@right -@bottom -@left;
	}
}

.steps ol {
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: var(--bg-white);
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: var(--progress-steps-z-index, 100);

	li {
		flex: 0 1 100%;
		flex-grow: 1;
		position: relative;
		padding: var(--progress-steps-list-item-padding);
		text-align: center;
		line-height: 1rem;
		overflow: hidden;
		height: 0;
		color: var(--text-gray);

		> a {
			display: block;
			width: 100%;

			/* Take full parent size, ignoring parents padding, and stil growing the parent with text from this element */
			padding: var(--progress-steps-list-item-padding);
			color: var(--brand-secondary);
			border: 0;
			cursor: pointer;
			.negative-margin(@list-item-padding);

			&:hover {
				.steps-number {
					border-radius: 50%;
					background-color: var(--brand-primary);
				}
			}

			&:before {
				.circle-base();

				content: "";
				box-sizing: border-box;
				z-index: 10;
				border-radius: 50%;
				border: 2px solid var(--brand-primary);
			}
		}

		.circle-base() {
			position: absolute;
			width: var(--progress-steps-circle-size);
			height: var(--progress-steps-circle-size);
			top: 50%;
			margin-top: calc(0px - var(--progress-steps-circle-size) / 2);
			left: 50%;
			margin-left: calc(0px - var(--progress-steps-circle-size) / 2);
		}

		/* Circle */
		&:before {
			.circle-base();

			content: "";
			box-sizing: border-box;
			z-index: 10;
			border-radius: 50%;
			border: 2px solid var(--gray);
			background-color: var(--bg-white);
		}

		.steps-icon {
			.circle-base();

			color: var(--brand-secondary);
			z-index: 15;
			line-height: var(--progress-steps-circle-size);
			text-align: center;
			font-size: 1.1rem;
		}

		.steps-number {
			.circle-base();

			font-family: var(--brand-headline);
			z-index: 15;
			line-height: var(--progress-steps-circle-size);
			text-align: center;
			font-size: 1rem;
		}

		/* Line */
		&:after {
			content: "";
			position: absolute;
			background-color: var(--gray);
			z-index: 5;
			height: var(--progress-steps-line-width);

			/* Prevents small render gaps on certain resolutions */
			width: 102%;
			left: 0;
			top: 50%;
			margin-top: calc(0px - var(--progress-steps-line-width) / 2);
		}

		&:first-child {
			&:after {
				right: 0;
				left: auto;
				width: 50%;
			}
		}

		&:last-child {
			&:after {
				width: 50%;
			}
		}
	}

	.steps-completed {
		color: var(--brand-secondary);

		&:before {
			border-color: var(--brand-primary);
			background-color: var(--brand-primary);
		}

		&:after {
			background-color: var(--brand-primary);
		}

		a {
			color: var(--brand-secondary);
		}

		i.completed {
			display: grid;

			&:before {
				content: "";
				position: absolute;
				place-self: center;
				width: clamp(7px 25% 10px);
				height: clamp(13px 48% 19px);
				border: solid currentColor;
				border-width: 0 2px 2px 0;
				transform: rotate(45deg) translate(-12%, -12%);
			}
		}
	}

	.steps-ongoing {
		color: var(--brand-secondary);

		&:before {
			border-color: var(--brand-primary);
		}

		&:after {
			background: linear-gradient(
				to right,
				var(--brand-primary) 50%,
				var(--gray) 50%
			);
		}

		&:first-child,
		&:last-child {
			&:after {
				background: var(--brand-primary);
			}
		}

		a {
			color: var(--brand-secondary);
		}
	}

	.steps-selected {
		color: var(--brand-secondary);
		font-weight: var(--font-weight-bold);

		.steps-number {
			color: var(--brand-secondary);
		}

		a {
			color: var(--brand-secondary);
		}
	}

	.steps-sub-title {
		line-height: 1rem;
		margin-top: var(--base-margin-xs);
		font-size: var(--font-size-small);
		color: var(--text-gray);
	}
}

.steps-responsive {
	width: 100%;
	justify-content: space-between;
	align-items: center;
	padding: var(--base-padding-xs) var(--base-padding-sm);
	box-sizing: border-box;
	display: flex;
}

.steps-responsive-text {
	flex-grow: 1;
	text-align: center;
}

@media screen and (min-width: @screen-sm-min) {
	.steps-responsive {
		display: none;
	}

	.steps ol {
		font-size: 1.1rem;

		li {
			padding: var(--progress-steps-list-item-padding-desktop);
			height: auto;

			> a {
				padding: var(--progress-steps-list-item-padding-desktop);
				.negative-margin(@list-item-padding-desktop);

				&:before {
					width: var(--progress-steps-circle-size-desktop);
					height: var(--progress-steps-circle-size-desktop);
					line-height: var(--progress-steps-circle-size-desktop);
					margin-left: calc(
						0px - var(--progress-steps-circle-size-desktop) / 2
					);
					top: calc(var(--progress-steps-list-item-padding-desktop-top) / 2);
					margin-top: calc(0px - var(--progress-steps-circle-size-desktop) / 2);
					border-width: 2px;
				}
			}

			/* Circle */
			.steps-icon,
			.steps-number,
			&:before {
				width: var(--progress-steps-circle-size-desktop);
				height: var(--progress-steps-circle-size-desktop);
				line-height: var(--progress-steps-circle-size-desktop);
				margin-left: calc(0px - var(--progress-steps-circle-size-desktop) / 2);
				top: calc(var(--progress-steps-list-item-padding-desktop-top) / 2);
				margin-top: calc(0px - var(--progress-steps-circle-size-desktop) / 2);
				border-width: 2px;
			}

			.steps-icon,
			&:before {
				font-size: 1.5rem;
			}

			.steps-number {
				font-size: 1.25rem;
			}

			/* Line */
			&:after {
				top: calc(var(--progress-steps-list-item-padding-desktop-top) / 2);
				margin-top: calc(0px - var(--progress-steps-line-width-desktop) / 2);
				height: var(--progress-steps-line-width-desktop);
			}
		}

		.steps-sub-title {
			margin-top: var(--base-margin-sm);
		}
	}

	.steps-vertical ol {
		display: block;

		li {
			display: block;
			text-align: left;
			padding: var(--progress-steps-list-item-padding-desktop-vertical);

			> a {
				padding: var(--progress-steps-list-item-padding-desktop-vertical);
				width: auto;
				.negative-margin(@list-item-padding-desktop-vertical);

				&:before {
					margin-left: 0;
					left: var(--progress-steps-vertical-left);
					top: 50%;
				}
			}

			/* Circle */
			&:before,
			.steps-icon,
			.steps-number {
				margin-left: 0;
				left: var(--progress-steps-vertical-left);
				top: 50%;
			}

			/* Line */
			&:after {
				width: var(--progress-steps-line-width-desktop);
				left: var(--progress-steps-vertical-left);
				margin-left: var(--progress-steps-vertical-margin);
				top: 0;
				bottom: 0;
				height: auto;
				margin-top: 0;
			}

			&:first-child {
				&:after {
					height: 50%;
					width: var(--progress-steps-line-width-desktop);
					left: var(--progress-steps-vertical-left);
					margin-left: var(--progress-steps-vertical-margin);
					top: auto;
				}
			}

			&:last-child {
				&:after {
					height: 50%;
					width: var(--progress-steps-line-width-desktop);
					left: var(--progress-steps-vertical-left);
					margin-left: var(--progress-steps-vertical-margin);
				}
			}
		}

		.steps-ongoing:after {
			background: linear-gradient(var(--brand-primary) 50%, var(--gray) 50%);
		}
	}
}

@media (forced-colors: active) {
	.steps ol {
		border: 3px solid;

		li {
			&:after {
				forced-color-adjust: none;
				filter: brightness(150%), saturate(500%);
			}
		}

		.steps-sub-title {
			forced-color-adjust: none;
			filter: brightness(500%);
		}
	}
}