/// Outputs all available features and styles for stepped progress.
///
/// @output The output includes the `.o-stepped-progress` class definition as well as class definitions for every available theme.
/// @example scss - All stepped progress styles
///   @include oSteppedProgress();
/// @example scss - Base styles with 'heavy' theme
///   @include oSteppedProgress((
///   	'themes': (
///   		'heavy'
///   	)
///   ));
/// @access public
@mixin oSteppedProgress(
	$opts: (
		'themes': (
			'heavy',
		),
	)
) {
	@include oPrivateFoundation();

	$themes: map_get($opts, 'themes');

	// Base stepped progress styles
	@include _oSteppedProgressBase();

	// Heavy theme
	@if index($themes, 'heavy') and _oSteppedProgressSupports('heavy') {
		@include _oSteppedProgressHeavy();
	}
}

/// Base styles for stepped progress.
///
/// @output The output includes the `.o-stepped-progress` class definition and all styles for a basic stepped progress.
/// @example scss - Base stepped progress styles
///   @include _oSteppedProgressBase();
/// @access private
@mixin _oSteppedProgressBase() {
	.o-stepped-progress {
		font-family: oPrivateFoundationGet('o3-type-detail-font-family');
		font-size: oPrivateFoundationGet('o3-type-detail-font-size');
		font-weight: oPrivateFoundationGet('o3-type-detail-font-weight');
		line-height: oPrivateFoundationGet('o3-type-detail-line-height');

		display: block;
		position: relative;

		a {
			color: inherit;
			text-decoration: underline;
			border-bottom: 0;
		}
	}

	// Progress bar
	.o-stepped-progress::before {
		content: '';
		display: block;
		width: 100%;
		height: _oSteppedProgressGet('bar-weight');
		position: absolute;
		top: calc(
			#{(div(_oSteppedProgressGet('step-size'), 2)) - (
					div(_oSteppedProgressGet('bar-weight'), 2)
				)} + #{$_o-stepped-progress-block-padding}
		);
		background-color: _oSteppedProgressGet('default-color');
	}

	.o-stepped-progress__steps {
		list-style: none;
		padding-left: 0;
		margin-top: 0;
		margin-bottom: 0;
		padding-top: $_o-stepped-progress-block-padding;
		padding-bottom: $_o-stepped-progress-block-padding;
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index: 10;
		overflow: hidden;

		> li {
			display: flex;
			flex-basis: 0;
			flex-grow: 2;
			justify-content: center;
			width: auto;

			&:first-child {
				flex-grow: 1;
				justify-content: flex-start;
			}

			&:last-child {
				flex-grow: 1;
				justify-content: flex-end;
			}
		}
	}

	// Individual step
	.o-stepped-progress__step {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;

		// Sensible line length but also fixes a flex bug in IE 11
		max-width: _oSteppedProgressGet('label-max-width');

		@include oPrivateNormaliseFocusApply() {
			@include oPrivateNormaliseFocusContent();
			text-decoration: none;
		}

		// The first and last step must be aligned differently:
		// the first is aligned left and the last is aligned right
		.o-stepped-progress__steps > li:first-child & {
			align-items: flex-start;
			text-align: left;

			// Progress bar alignment
			&::after {
				right: 100%;
			}
		}
		.o-stepped-progress__steps > li:last-child & {
			align-items: flex-end;
			text-align: right;

			// Progress bar alignment
			&::after {
				right: 0;
			}
		}

		// The step type indicator
		&::before {
			content: '';
			display: inline-block;
			vertical-align: middle;
			height: _oSteppedProgressGet('step-size') -
				(_oSteppedProgressGet('step-border-size') * 2);
			width: _oSteppedProgressGet('step-size') -
				(_oSteppedProgressGet('step-border-size') * 2);
			margin-bottom: oPrivateSpacingByName('s1');
			background-color: _oSteppedProgressGet('container-background');
			background-repeat: no-repeat;
			background-origin: border-box;
			background-position: center;
			background-size: 100%;
			border-radius: 50%;
			border: solid _oSteppedProgressGet('step-border-size')
				_oSteppedProgressGet('default-color');
		}
	}

	// The complete and current steps render the black progress bar
	// after themselves. Both step modifiers need these styles
	.o-stepped-progress__step--complete,
	.o-stepped-progress__step--current,
	.o-stepped-progress__step--error {
		position: relative;

		&::after {
			content: '';
			display: block;
			width: 100vw;
			height: _oSteppedProgressGet('bar-weight');
			position: absolute;
			top: (div(_oSteppedProgressGet('step-size'), 2)) -
				(div(_oSteppedProgressGet('bar-weight'), 2));
			right: 50%;
			z-index: -5;
			background-color: _oSteppedProgressGet('interacted-color');
		}
	}

	// Completed step modifier
	.o-stepped-progress__step--complete {
		&::before {
			@include oPrivateIconsContent(
				$icon-name: 'tick',
				$color: _oSteppedProgressGet('container-background'),
				$size: null,
				$include-base-styles: false,
				$high-contrast-fallback: false
			);
			background-color: _oSteppedProgressGet('interacted-color');
			border-color: transparent;
		}
	}

	// Current step modifier
	.o-stepped-progress__step--current {
		&::before {
			background-color: _oSteppedProgressGet('interacted-color');
			border-color: _oSteppedProgressGet('interacted-color');
			box-shadow: inset 0px 0px 0px _oSteppedProgressGet('step-border-size')
				_oSteppedProgressGet('container-background');
		}
	}

	// Errored step modifier
	.o-stepped-progress__step--error {
		&::before {
			@include oPrivateIconsContent(
				$icon-name: 'warning',
				$color: _oSteppedProgressGet('container-background'),
				$size: null,
				$include-base-styles: false,
				$high-contrast-fallback: false
			);
			background-color: _oSteppedProgressGet('error-color');
			border-color: transparent;
		}
	}

	// Step label styles
	.o-stepped-progress__label {
		// Sensible line length but also fixes a flex bug in IE 11.
		// Repetition of this line from .o-stepped-progress__stepped
		// is required for the fix to work.
		max-width: _oSteppedProgressGet('label-max-width');
	}

	// Step status indicator (for core experience and screen readers)
	@supports (display: flex) {
		.o-stepped-progress__status {
			@include oPrivateNormaliseVisuallyHidden();
		}
	}

	// IE hack:
	// The @supports directive is not supported by IE 10/11, but we
	// do need to hide the progress status from them. We duplicate
	// the styles for these browsers
	// sass-lint:disable-all
	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
		.o-stepped-progress__status {
			@include oPrivateNormaliseVisuallyHidden();
		}
	}
	// sass-lint:enable-all
}

/// Heavy theme for the stepped progress component.
///
/// @output The output includes the `.o-stepped-progress--heavy` class definition and all style overrides for it.
/// @example scss - Heavy stepped progress styles
///   @include _oSteppedProgressHeavy();
/// @access private
@mixin _oSteppedProgressHeavy() {
	$variant: 'heavy';

	.o-stepped-progress--heavy {
		strong {
			font-weight: oPrivateFoundationGet('o3-font-weight-semibold');
		}

		// Progress bars
		&::before {
			height: _oSteppedProgressGet('bar-weight', $variant);
			top: calc(
				#{(div(_oSteppedProgressGet('step-size', $variant), 2)) - (
						div(_oSteppedProgressGet('bar-weight', $variant), 2)
					)} + #{$_o-stepped-progress-block-padding}
			);
		}
		.o-stepped-progress__step--complete,
		.o-stepped-progress__step--current,
		.o-stepped-progress__step--error {
			&::after {
				height: _oSteppedProgressGet('bar-weight', $variant);
				top: (div(_oSteppedProgressGet('step-size', $variant), 2)) -
					(div(_oSteppedProgressGet('bar-weight', $variant), 2));
			}
		}

		// The step type indicator
		.o-stepped-progress__step {
			&::before {
				height: _oSteppedProgressGet('step-size', $variant) -
					(_oSteppedProgressGet('step-border-size', $variant) * 2);
				width: _oSteppedProgressGet('step-size', $variant) -
					(_oSteppedProgressGet('step-border-size', $variant) * 2);
				border-width: _oSteppedProgressGet('step-border-size', $variant);
			}
		}

		// Completed step modifier
		.o-stepped-progress__step--complete {
			&::before {
				@include oPrivateIconsContent(
					$icon-name: 'tick',
					$color: _oSteppedProgressGet('interacted-color'),
					$size: null,
					$include-base-styles: false,
					$high-contrast-fallback: false
				);
				background-color: _oSteppedProgressGet('container-background');
				background-size: 160%;
				background-position: 46% 39%;
				background-origin: content-box;
				border-color: _oSteppedProgressGet('interacted-color');
			}
		}

		// Current step modifier
		.o-stepped-progress__step--current {
			&::before {
				background-color: _oSteppedProgressGet('container-background');
				box-shadow: none;
			}
		}
	}
}