.multi-step-nav {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin-bottom: $cadmin-multi-step-nav-margin-bottom;
	padding: $cadmin-multi-step-nav-padding-y $cadmin-multi-step-nav-padding-x;
	position: relative;
}

.multi-step-indicator-label-bottom {
	.multi-step-item {
		padding-bottom: $cadmin-multi-step-indicator-label-font-size *
			$cadmin-line-height-base;
	}

	.multi-step-indicator-label {
		top: $cadmin-multi-step-icon-size;
	}
}

.multi-step-indicator-label-top {
	.multi-step-item {
		padding-top: $cadmin-multi-step-indicator-label-font-size *
			$cadmin-line-height-base;
	}

	.multi-step-indicator-label {
		bottom: $cadmin-multi-step-icon-size + $cadmin-multi-step-divider-height;
	}
}

.multi-step-title-center {
	@include clay-map-to-css($cadmin-multi-step-title-center);
}

.multi-step-item {
	margin-bottom: $cadmin-multi-step-item-margin-bottom;
	position: relative;

	&:last-child {
		.multi-step-divider {
			display: none;
		}
	}

	&.active {
		.multi-step-icon {
			background-color: $cadmin-multi-step-icon-active-bg;
			background-image: $cadmin-multi-step-icon-active-bg-image;
			background-position: $cadmin-multi-step-icon-active-bg-position;
			background-repeat: no-repeat;
			background-size: $cadmin-multi-step-icon-active-bg-size;
			color: $cadmin-multi-step-icon-active-color;

			@if ($cadmin-multi-step-icon-active-bg-image) {
				&[data-multi-step-icon] {
					&:before {
						content: none;
					}
				}
			}
		}

		.multi-step-divider {
			background-color: $cadmin-multi-step-divider-active-bg;
		}
	}

	&.active.complete {
		.multi-step-icon {
			background-color: $cadmin-multi-step-icon-active-bg;
			color: $cadmin-multi-step-icon-active-color;
		}
	}

	&.complete {
		.dropdown .multi-step-icon {
			&,
			&:active {
				background-image: none;
			}
		}

		.multi-step-icon {
			background-color: $cadmin-multi-step-icon-complete-bg;
			color: $cadmin-multi-step-icon-complete-color;

			@if ($cadmin-multi-step-icon-complete-bg-image) {
				background-image: $cadmin-multi-step-icon-complete-bg-image;
				background-position: $cadmin-multi-step-icon-complete-bg-position;
				background-repeat: no-repeat;
				background-size: $cadmin-multi-step-icon-complete-bg-size;

				&[data-multi-step-icon] {
					&:before {
						content: none;
					}
				}

				// BS4 resets background-image in buttons https://github.com/twbs/bootstrap/issues/23353

				&:active {
					background-image: $cadmin-multi-step-icon-complete-bg-image;
				}
			}
		}

		.multi-step-divider {
			background-color: $cadmin-multi-step-divider-complete-bg;
		}
	}

	&.error {
		@include clay-css($cadmin-multi-step-item-error);

		.multi-step-title {
			@include clay-text-typography(
				map-get($cadmin-multi-step-item-error, multi-step-title)
			);
		}

		.multi-step-icon {
			$_multi-step-icon: setter(
				map-get($cadmin-multi-step-item-error, multi-step-icon)
			);

			@include clay-css($_multi-step-icon);

			&[data-multi-step-icon] {
				$_data-multi-step-icon: setter(
					map-get($_multi-step-icon, data-multi-step-icon),
					()
				);

				&::before {
					@include clay-css(map-get($_data-multi-step-icon, before));
				}
			}

			.lexicon-icon {
				@include clay-css(map-get($_multi-step-icon, lexicon-icon));
			}
		}

		.multi-step-divider {
			@include clay-css(
				map-get($cadmin-multi-step-item-error, multi-step-divider)
			);
		}
	}

	&.disabled {
		.multi-step-title {
			@include clay-text-typography($cadmin-multi-step-title-disabled);
		}

		.multi-step-icon {
			background-color: $cadmin-multi-step-icon-disabled-bg;
			background-image: $cadmin-multi-step-icon-disabled-bg-image;
			background-position: $cadmin-multi-step-icon-disabled-bg-position;
			background-repeat: no-repeat;
			background-size: $cadmin-multi-step-icon-disabled-bg-size;
			color: $cadmin-multi-step-icon-disabled-color;
			cursor: $cadmin-multi-step-icon-disabled-cursor;
			opacity: $cadmin-multi-step-icon-disabled-opacity;

			@if ($cadmin-multi-step-icon-disabled-bg-image) {
				&[data-multi-step-icon] {
					&:before {
						content: none;
					}
				}
			}

			@at-root {
				&.focus,
				#{$focus-visible-selector},
				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
					box-shadow: $cadmin-multi-step-icon-disabled-focus-box-shadow;
				}
			}
		}

		.multi-step-indicator-label {
			color: $cadmin-multi-step-indicator-label-disabled-color;
		}

		.multi-step-divider {
			background-color: $cadmin-multi-step-divider-disabled-bg;
		}
	}
}

.multi-step-title {
	@include clay-text-typography($cadmin-multi-step-title);
}

.multi-step-item-expand {
	flex-grow: 1;
	width: $cadmin-multi-step-item-width;
}

.multi-step-divider {
	background-color: $cadmin-multi-step-divider-bg;
	height: $cadmin-multi-step-divider-height;
	margin-left: $cadmin-multi-step-icon-size;
	margin-top: math-sign($cadmin-multi-step-divider-height);
	position: relative;
	top: $cadmin-multi-step-divider-top;
}

.multi-step-indicator {
	position: relative;
	width: $cadmin-multi-step-indicator-width;

	.dropdown-item-indicator,
	.dropdown-item-indicator-start,
	.dropdown-item-indicator-end {
		display: none;
	}

	.complete {
		.dropdown-item-indicator,
		.dropdown-item-indicator-start,
		.dropdown-item-indicator-end {
			display: block;
		}
	}

	.multi-step-indicator-label {
		color: $cadmin-multi-step-indicator-label-color;
		font-size: $cadmin-multi-step-indicator-label-font-size;
		font-weight: $cadmin-multi-step-indicator-label-font-weight;
		left: 50%;
		max-width: $cadmin-multi-step-indicator-label-max-width;
		position: absolute;
		transform: translateX(-50%);

		@include text-truncate;
	}
}

.multi-step-icon {
	align-items: center;
	background-color: $cadmin-multi-step-icon-bg;
	border-color: $cadmin-multi-step-icon-border-color;
	border-radius: $cadmin-multi-step-icon-border-radius;
	border-style: $cadmin-multi-step-icon-border-style;
	border-width: $cadmin-multi-step-icon-border-width;
	color: $cadmin-multi-step-icon-color;
	cursor: $cadmin-multi-step-icon-cursor;
	display: flex;
	font-size: $cadmin-multi-step-icon-font-size;
	font-weight: $cadmin-multi-step-icon-font-weight;
	height: $cadmin-multi-step-icon-size;
	justify-content: center;
	padding-bottom: $cadmin-multi-step-icon-padding-bottom;
	padding-left: $cadmin-multi-step-icon-padding-left;
	padding-right: $cadmin-multi-step-icon-padding-right;
	padding-top: $cadmin-multi-step-icon-padding-top;
	position: relative;

	@include transition($cadmin-multi-step-icon-transition);

	width: $cadmin-multi-step-icon-size;

	&:hover {
		background-color: $cadmin-multi-step-icon-hover-bg;
		color: $cadmin-multi-step-icon-hover-color;
		text-decoration: $cadmin-multi-step-icon-hover-text-decoration;
	}

	@at-root {
		&.focus,
		#{$focus-visible-selector},
		#{if($c-prefers-focus-selector, $c-prefers-focus-selector, clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
			background-color: $cadmin-multi-step-icon-focus-bg;
			box-shadow: $cadmin-multi-step-icon-focus-box-shadow;
			color: $cadmin-multi-step-icon-focus-color;
			outline: $cadmin-multi-step-icon-focus-outline;
			text-decoration: $cadmin-multi-step-icon-focus-text-decoration;
		}
	}

	&[data-multi-step-icon]:before {
		content: attr(data-multi-step-icon);
		height: $cadmin-multi-step-icon-size;
		line-height: $cadmin-multi-step-icon-size;
		text-align: center;
		width: $cadmin-multi-step-icon-size;
	}

	@if ($cadmin-enable-c-inner) {
		.c-inner {
			margin-bottom: #{math-sign($cadmin-multi-step-icon-padding-bottom)};
			margin-left: #{math-sign($cadmin-multi-step-icon-padding-left)};
			margin-right: #{math-sign($cadmin-multi-step-icon-padding-right)};
			margin-top: #{math-sign($cadmin-multi-step-icon-padding-top)};
			position: absolute;
		}
	}

	.btn-link {
		vertical-align: baseline;
	}

	.lexicon-icon {
		height: $cadmin-multi-step-icon-font-size;
		margin-top: 0;
		width: $cadmin-multi-step-icon-font-size;
	}
}

.multi-step-item-fixed-width {
	&.multi-step-item,
	.multi-step-item-expand {
		flex-grow: 0;
		width: $cadmin-multi-step-item-fixed-width;
	}
}

.multi-step-nav-center {
	@include clay-css($cadmin-multi-step-nav-center);

	.multi-step-item {
		$_item: setter(
			map-get($cadmin-multi-step-nav-center, multi-step-item),
			()
		);

		@include clay-css($_item);
	}

	.multi-step-divider {
		@include clay-css(
			map-get($cadmin-multi-step-nav-center, multi-step-divider)
		);
	}

	.multi-step-indicator {
		@include clay-css(
			map-get($cadmin-multi-step-nav-center, multi-step-indicator)
		);
	}

	.multi-step-title {
		@include clay-css(
			map-get($cadmin-multi-step-nav-center, multi-step-title)
		);
	}
}

.multi-step-nav-collapse-sm {
	@include media-breakpoint-down(sm, $cadmin-grid-breakpoints) {
		flex-wrap: nowrap;

		&.multi-step-indicator-label-top {
			.multi-step-indicator-label {
				bottom: auto;
				top: 0;
			}
		}

		&.multi-step-indicator-label-bottom {
			.multi-step-indicator-label {
				bottom: 0;
				top: auto;
			}
		}

		&.multi-step-title-center {
			.multi-step-title {
				margin-left: 0;
				max-width: none;
				transform: none;
			}
		}

		&.multi-step-nav-center {
			.multi-step-item {
				flex-grow: 0;
				width: auto;
			}

			.multi-step-item-expand {
				flex-grow: 1;
				width: 75px;
			}

			.multi-step-divider {
				left: auto;
				margin-left: $cadmin-multi-step-icon-size;
				width: auto;
			}

			.multi-step-indicator {
				left: auto;
				transform: none;
			}
		}

		.active {
			&.multi-step-item {
				position: static;
			}

			.multi-step-title {
				display: block;
				left: 0;
				position: absolute;
				right: 0;
				text-align: center;
				top: 0;
			}

			.multi-step-indicator {
				position: static;
			}

			.multi-step-indicator-label {
				display: block;
				left: 0;
				max-width: none;
				position: absolute;
				right: 0;
				text-align: center;
				transform: none;
				width: auto;
			}
		}

		.multi-step-item {
			margin-bottom: 0;
			min-width: $cadmin-multi-step-icon-size;
			padding-top: $cadmin-multi-step-title-font-size +
				$cadmin-multi-step-title-margin-bottom +
				($cadmin-multi-step-divider-height * 0.5);
		}

		.multi-step-title {
			display: none;
		}

		.multi-step-indicator-label {
			display: none;
		}
	}
}