$cadmin-multi-step-nav-margin-bottom: 15px !default;
$cadmin-multi-step-nav-padding-x: 15px !default;
$cadmin-multi-step-nav-padding-y: 0 !default;

$cadmin-multi-step-icon-bg: $cadmin-gray-200 !default;
$cadmin-multi-step-icon-border-color: null !default;
$cadmin-multi-step-icon-border-style: null !default;
$cadmin-multi-step-icon-border-width: 0 !default;
$cadmin-multi-step-icon-color: $cadmin-gray-600 !default;
$cadmin-multi-step-icon-cursor: $cadmin-link-cursor !default;
$cadmin-multi-step-icon-border-radius: 100px !default;
$cadmin-multi-step-icon-font-size: 14px !default;
$cadmin-multi-step-icon-font-weight: $cadmin-font-weight-semi-bold !default;
$cadmin-multi-step-icon-padding-bottom: 0 !default;
$cadmin-multi-step-icon-padding-left: 0 !default;
$cadmin-multi-step-icon-padding-right: 0 !default;
$cadmin-multi-step-icon-padding-top: 0 !default;
$cadmin-multi-step-icon-size: 32px !default;
$cadmin-multi-step-icon-transition: box-shadow 0.15s ease-in-out !default;

$cadmin-multi-step-icon-hover-bg: $cadmin-multi-step-icon-bg !default;
$cadmin-multi-step-icon-hover-color: $cadmin-multi-step-icon-color !default;
$cadmin-multi-step-icon-hover-text-decoration: none !default;

$cadmin-multi-step-icon-focus-bg: null !default;
$cadmin-multi-step-icon-focus-box-shadow: $cadmin-component-focus-box-shadow !default;
$cadmin-multi-step-icon-focus-color: null !default;
$cadmin-multi-step-icon-focus-outline: 0 !default;
$cadmin-multi-step-icon-focus-text-decoration: $cadmin-multi-step-icon-hover-text-decoration !default;

$cadmin-multi-step-divider-bg: $cadmin-gray-200 !default;
$cadmin-multi-step-divider-height: 4px !default;
$cadmin-multi-step-divider-spacer-x: 0 !default;
$cadmin-multi-step-divider-top: ($cadmin-multi-step-divider-height * 0.5) +
	($cadmin-multi-step-icon-size * 0.5) !default;

$cadmin-multi-step-indicator-width: $cadmin-multi-step-icon-size +
	($cadmin-multi-step-divider-spacer-x * 2) !default;

$cadmin-multi-step-indicator-label-color: $cadmin-gray-600 !default;
$cadmin-multi-step-indicator-label-font-size: 14px !default;
$cadmin-multi-step-indicator-label-font-weight: $cadmin-font-weight-semi-bold !default;
$cadmin-multi-step-indicator-label-max-width: 100px !default;

$cadmin-multi-step-title-color: $cadmin-gray-600 !default;
$cadmin-multi-step-title-font-size: 14px !default;
$cadmin-multi-step-title-font-weight: $cadmin-font-weight-semi-bold !default;
$cadmin-multi-step-title-margin-bottom: 10px !default; // 10px
$cadmin-multi-step-title-max-width: 100px !default;

$cadmin-multi-step-title: () !default;
$cadmin-multi-step-title: map-deep-merge(
	(
		color: $cadmin-multi-step-title-color,
		font-size: $cadmin-multi-step-title-font-size,
		font-weight: $cadmin-multi-step-title-font-weight,
		line-height: normal,
		margin-bottom: $cadmin-multi-step-title-margin-bottom,
		word-wrap: break-word,
	),
	$cadmin-multi-step-title
);

$cadmin-multi-step-title-center: () !default;
$cadmin-multi-step-title-center: map-deep-merge(
	(
		multi-step-title: (
			margin-left: calc(#{$cadmin-multi-step-icon-size} * 0.5),
			max-width: $cadmin-multi-step-title-max-width,
			overflow: hidden,
			position: relative,
			text-align: center,
			text-overflow: ellipsis,
			transform: translateX(-50%),
			white-space: nowrap,
			width: auto,
		),
	),
	$cadmin-multi-step-title-center
);

$cadmin-multi-step-item-margin-bottom: 10px !default;
$cadmin-multi-step-item-width: 75px !default;
$cadmin-multi-step-item-fixed-width: 150px !default;

$cadmin-multi-step-nav-center: () !default;
$cadmin-multi-step-nav-center: map-deep-merge(
	(
		padding: 0,
		text-align: center,
		multi-step-item: (
			flex-grow: 1,
			width: $cadmin-multi-step-item-width,
		),
		multi-step-divider: (
			left: 50%,
			margin-left: 1rem,
			width: calc(100% - #{$cadmin-multi-step-icon-size}),
		),
		multi-step-indicator: (
			left: 50%,
			transform: translateX(-50%),
		),
		multi-step-title: (
			margin-left: 12.5%,
			max-width: 75%,
		),
	),
	$cadmin-multi-step-nav-center
);

// data-multi-step-icon::before See https://issues.liferay.com/browse/LPS-147457.

$cadmin-multi-step-item-error: () !default;
$cadmin-multi-step-item-error: map-deep-merge(
	(
		multi-step-icon: (
			background-color: $cadmin-danger,
			background-image: clay-icon(times, $cadmin-white),
			color: $cadmin-white,
			text-indent: -100px,
			data-multi-step-icon: (
				before: (
					content: none,
				),
			),
			lexicon-icon: (
				display: none,
			),
		),
	),
	$cadmin-multi-step-item-error
);

$cadmin-multi-step-icon-complete-color: $cadmin-white !default;
$cadmin-multi-step-icon-complete-bg: $cadmin-gray-600 !default;
$cadmin-multi-step-icon-complete-bg-image: clay-icon(
	check,
	$cadmin-multi-step-icon-complete-color
) !default;
$cadmin-multi-step-icon-complete-bg-position: center !default;
$cadmin-multi-step-icon-complete-bg-size: $cadmin-multi-step-icon-font-size !default;
$cadmin-multi-step-divider-complete-bg: $cadmin-multi-step-icon-complete-bg !default;
$cadmin-multi-step-dropdown-indicator-complete-icon: clay-icon(
	check,
	$cadmin-dropdown-link-active-color
) !default;
$cadmin-multi-step-dropdown-indicator-complete-width: 14px !default;

$cadmin-multi-step-icon-active-color: $cadmin-component-active-color !default;
$cadmin-multi-step-icon-active-bg: $cadmin-component-active-bg !default;
$cadmin-multi-step-icon-active-bg-image: null !default;
$cadmin-multi-step-icon-active-bg-position: center !default;
$cadmin-multi-step-icon-active-bg-size: $cadmin-multi-step-icon-font-size !default;
$cadmin-multi-step-divider-active-bg: $cadmin-multi-step-divider-bg !default;

$cadmin-multi-step-icon-disabled-bg: $cadmin-multi-step-icon-bg !default;
$cadmin-multi-step-icon-disabled-bg-image: null !default;
$cadmin-multi-step-icon-disabled-bg-position: null !default;
$cadmin-multi-step-icon-disabled-bg-size: null !default;
$cadmin-multi-step-icon-disabled-color: $cadmin-gray-500 !default;
$cadmin-multi-step-icon-disabled-cursor: $cadmin-disabled-cursor !default;
$cadmin-multi-step-icon-disabled-opacity: 1 !default;
$cadmin-multi-step-icon-disabled-focus-box-shadow: none !default;
$cadmin-multi-step-divider-disabled-bg: $cadmin-multi-step-icon-disabled-bg !default;
$cadmin-multi-step-title-disabled-color: $cadmin-multi-step-icon-disabled-color !default;
$cadmin-multi-step-indicator-label-disabled-color: $cadmin-multi-step-title-disabled-color !default;

$cadmin-multi-step-title-disabled: () !default;
$cadmin-multi-step-title-disabled: map-deep-merge(
	(
		color: $cadmin-multi-step-title-disabled-color,
	),
	$cadmin-multi-step-title-disabled
);