@use "sass:math" as math;

// ------------------------------------
// CHECKOUT COLUMNS LAYOUT
// ------------------------------------
body:not( .has-checkout-must-login-notice ) .fc-checkout-header ~ .woocommerce-message,
body:not( .has-checkout-must-login-notice ) .fc-checkout-header ~ .woocommerce-info,
body:not( .has-checkout-must-login-notice ) .fc-checkout-header ~ .woocommerce-error,
body:not( .has-checkout-must-login-notice ) .fc-checkout-notices,
body:not( .has-checkout-must-login-notice )#{ $_body-page-selector } .woocommerce-NoticeGroup,
body:not( .has-checkout-must-login-notice ) .fc-progress-bar,
body:not( .has-checkout-must-login-notice ) .fc-inside {
	@media (#{$bp-larger-than-desktop}) {
		float: $alignment-left;
		width: calc( #{ $checkout-steps-width--large-screen } - #{ $checkout-column-gap--large-screen } );
		padding-top: $global-spacing-tiny;
		padding-#{ $alignment-left }: 0;
		padding-#{ $alignment-right }: 0;
	}
}

body:not( .has-checkout-must-login-notice ):not( .has-fc-sidebar ) .fc-checkout-header ~ .woocommerce-message,
body:not( .has-checkout-must-login-notice ):not( .has-fc-sidebar ) .fc-checkout-header ~ .woocommerce-info,
body:not( .has-checkout-must-login-notice ):not( .has-fc-sidebar ) .fc-checkout-header ~ .woocommerce-error,
body:not( .has-checkout-must-login-notice ):not( .has-fc-sidebar ) .fc-checkout-notices,
body:not( .has-checkout-must-login-notice ):not( .has-fc-sidebar )#{ $_body-page-selector } .woocommerce-NoticeGroup,
body:not( .has-checkout-must-login-notice ):not( .has-fc-sidebar ) .fc-progress-bar,
body:not( .has-checkout-must-login-notice ):not( .has-fc-sidebar ) .fc-inside {
	@media (#{$bp-larger-than-desktop}) {
		width: $checkout-steps-width--large-screen;
		margin-#{ $alignment-left }: math.div( 100 - $checkout-steps-width--large-screen, 2 );
	}
}



.fc-wrapper {
	position: relative;
	clear: both;
}
.fc-wrapper::before,
.fc-wrapper::after {
	@include clearfix();
}



.fc-sidebar {
	position: static;

	@media (#{$bp-larger-than-tablet}) and (#{$bp-smaller-than-desktop}) {
		margin-top: $global-spacing-small;
	}

	@media (#{$bp-larger-than-desktop}) {
		z-index: z( 'default' ) + 1;
		float: $alignment-right;
		width: $checkout-overview-width--large-screen;
	}
}

.fc-sidebar__inner {
	z-index: z( 'above' );
	width: 100%;

	@media (#{$bp-larger-than-desktop}) {
		position: relative;
		padding-top: $global-spacing-tiny;
	}
}
// Sticky state on mobile
.fc-wrapper .fc-sidebar .fc-sidebar__inner {
	@media (#{$bp-smaller-than-desktop}) {
		position: static !important;
	}
}
// With admin bar
.admin-bar .fc-wrapper .fc-sidebar.is-sticky .fc-sidebar__inner {
	@media (#{$bp-larger-than-desktop}) {
		padding-top: calc( #{ $global-spacing-tiny } + 32px ); // Use pixels to match styles of the WordPress Admin bar
	}
}