@use '../../../variables' as *;

$colors-map: (primary, secondary, success, info, warning, danger);

.#{$prefix}theme-centurion {
	.#{$prefix}steps {
		--#{$prefix}step-divider-color: var(--#{$prefix}border-color);

		--#{$prefix}_completed-step-divider-color: var(--#{$prefix}primary-color);

		--#{$prefix}_current-step-divider-color: var(--#{$prefix}border-color);
		--#{$prefix}_current-step-border-color: var(--#{$prefix}primary-color);

		--#{$prefix}step-background-color: var(--#{$prefix}white-color);
	}

	.#{$prefix}step {
		&__avatar {
			--#{$prefix}step-indicator-font-size: 16px;
			--#{$prefix}step-indicator-font-weight: var(--#{$prefix}font-weight-medium);
			--#{$prefix}step-indicator-color: var(--#{$prefix}primary-color);

			& > .#{$prefix}surface {
				--#{$prefix}surface-color: var(--#{$prefix}primary-color);
				--#{$prefix}surface-opacity: 0.12;
			}
		}
	}

	.#{$prefix}step--completed .#{$prefix}step__avatar {
		--#{$prefix}step-indicator-color: var(--#{$prefix}white-color);

		& > .#{$prefix}surface {
			--#{$prefix}surface-color: var(--#{$prefix}primary-color);
			--#{$prefix}surface-opacity: 1;
		}
	}

	.#{$prefix}step--current .#{$prefix}step__avatar {
		--#{$prefix}step-indicator-color: var(--#{$prefix}white-color);

		& > .#{$prefix}surface {
			--#{$prefix}surface-color: var(--#{$prefix}primary-color);
			--#{$prefix}surface-opacity: 1;
		}
	}

	@each $color in $colors-map {
		.#{$prefix}step--#{$color} {
			--#{$prefix}_completed-step-divider-color: var(--#{$prefix}#{$color}-color);
			--#{$prefix}_current-step-divider-color: var(--#{$prefix}#{$color}-color);
			--#{$prefix}_current-step-border-color: var(--#{$prefix}#{$color}-color);
		}

		.#{$prefix}step--#{$color} .#{$prefix}step__avatar {
			--#{$prefix}step-indicator-color: var(--#{$prefix}#{$color}-color);

			& > .#{$prefix}surface {
				--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
			}
		}

		.#{$prefix}step--completed.#{$prefix}step--#{$color} .#{$prefix}step__avatar {
			--#{$prefix}step-indicator-color: var(--#{$prefix}white-color);

			& > .#{$prefix}surface {
				--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
			}
		}

		.#{$prefix}step--current.#{$prefix}step--#{$color} .#{$prefix}step__avatar {
			--#{$prefix}step-indicator-color: var(--#{$prefix}white-color);

			& > .#{$prefix}surface {
				--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
			}
		}
	}
}