@use "sass:math" as math;

// ------------------------------------
// CHECKOUT PROGRESS BAR
// ------------------------------------
.fc-progress-bar {
	margin: $checkout-progress-margin;

	@media (#{$bp-larger-than-tablet}) {
		margin: $checkout-progress-margin--large-screen;
	}
}

.fc-progress-bar .fc-progress-bar__inner {
	padding: $checkout-progress-padding;
	background-color: $checkout-progress-background-color;

	@media (#{$bp-larger-than-tablet}) {
		padding: $checkout-progress-padding--large-screen;
		border-radius: $checkout-substep-border-radius;
	}
}
// Sticky state
.fc-progress-bar[data-sticky-states].is-activated .fc-progress-bar__inner {
	z-index: z( 'float-element' ) - 2; // Needed to show behing the order summary flyout
}
// With admin bar
.admin-bar .fc-progress-bar[data-sticky-states].is-sticky--top .fc-progress-bar__inner {
	transform: translateY( 46px );

	@media screen and (min-width: 783px) { // Uses absolute values for breakpoint to match WordPress admin bar
		transform: translateY( 32px );
	}
}





.fc-progress-bar + .fc-checkout-notices,
.fc-progress-bar + form.woocommerce-checkout {
	padding-top: $global-spacing-extra-small;
}





.fc-progress-bar__count {
	margin: $checkout-step-count-margin;
	color: $checkout-step-count-color;
	font-weight: $checkout-step-count-font-weight;
	font-size: $checkout-step-count-font-size;
	text-transform: $checkout-step-count-text-transform;
	text-align: $checkout-step-count-text-align;
	line-height: 1;

	@media (#{$bp-larger-than-desktop}) {
		margin: $checkout-step-count-margin--large-screen;
		font-size: $checkout-step-count-font-size--large-screen;
	}
}





.fc-progress-bar__bars {
	width: 100%;
	height: $checkout-progress-bar-height;
	border: $checkout-progress-bar-border;
	border-radius: $checkout-progress-bar-border-radius;
	background-color: $checkout-progress-bar-color;
	overflow: hidden;
}

.fc-progress-bar__bar {
	display: block;
	float:left;
	margin: 0;
	width: 0;
	height: $checkout-progress-bar-height;
	background-color: $checkout-progress-bar-color;
	transition: width $global-animation-duration linear, background-color $global-animation-duration linear;
}
.fc-progress-bar__bar.is-complete { background-color: $checkout-progress-bar-complete-color; }
.fc-progress-bar__bar.is-current { background-color: $checkout-progress-bar-current-color; }

// Progress bar width
// Supports from 2 to 10 checkout steps
@for $count from 2 through 10 {
	.fc-progress-bar__bars[data-step-count="#{$count}"] .fc-progress-bar__bar.is-complete,
	.fc-progress-bar__bars[data-step-count="#{$count}"] .fc-progress-bar__bar.is-current {
		width: #{ math.div( 100%, $count ) };
	}
}