// ------------------------------------
// CHECKOUT HEADER
// ------------------------------------
.fc-checkout-header {
	z-index: z( 'sticky-element' );
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;

	width: 100%;
	min-height: $checkout-header-height;
	background-color: $checkout-header-background-color;
	border-bottom: $checkout-header-border;
	box-shadow: $checkout-header-box-shadow;

	@media (#{$bp-larger-than-desktop}) {
		position: static;
		min-height: $checkout-header-height--large-screen;
		border-bottom: $checkout-header-border--large-screen;
		box-shadow: $checkout-header-box-shadow--large-screen;
	}
}
// With admin bar
.admin-bar .fc-checkout-header {
	top: 46px; // Uses pixels to match WordPress admin bar

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

.fc-checkout-header__inner {
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 auto;
	width: 100%;

	// min-height should be same as the main header element
	min-height: $checkout-header-height;
	@media (#{$bp-larger-than-desktop}) { min-height: $checkout-header-height--large-screen; }

	// max-width
	max-width: $container-width-mobile;
	@media (#{$bp-larger-than-tablet}) { max-width: $container-width-tablet; }
	@media (#{$bp-larger-than-desktop}) { max-width: $container-width-desktop; }
	@media (#{$bp-larger-than-desktop-medium}) { max-width: $container-width-desktop-medium; }
	@media (#{$bp-larger-than-desktop-large}) { max-width: $container-width-desktop-large; }
	@media (#{$bp-larger-than-desktop-extra-large}) { max-width: $container-width-desktop-extra-large; }

	// padding
	padding: 0 $container-spacing-mobile;
	@media (#{$bp-larger-than-tablet}) { padding: 0 $container-spacing-tablet; }
	@media (#{$bp-larger-than-desktop}) { padding: 0 $container-spacing-desktop; }
	@media (#{$bp-larger-than-desktop-medium}) { padding: 0 $container-spacing-desktop-medium; }
	@media (#{$bp-larger-than-desktop-large}) { padding: 0 $container-spacing-desktop-large; }
	@media (#{$bp-larger-than-desktop-extra-large}) { padding: 0 $container-spacing-desktop-extra-large; }
}





.fc-checkout-header .fc-checkout__title.screen-reader-text {
	clip: rect( 1px, 1px, 1px, 1px );
	position: absolute !important; // Needed to make sure other style rules won't affect accessibility
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.fc-checkout-header .fc-checkout__site-name {
	display: inline-block;
	margin: $global-spacing-extra-small 0;
	padding: 0;
	font-size: $font-size;
	font-weight: bold;
}

.fc-checkout-header .custom-logo-link {
	display: inline-block;
	margin: remsize( .2rem ) 0 0;
}

.fc-checkout-header .fc-checkout__branding {
	line-height: 1;
}

.fc-checkout-header .fc-checkout__branding img {
	max-height: remsize( 4.6rem );
	max-width: remsize( 13rem );
	width: 100%;
	object-fit: contain;

	@media (#{$bp-larger-than-mobile}) { max-width: remsize( 18rem ); } // Larger mobile devices
	@media (#{$bp-larger-than-tablet}) { max-width: remsize( 20rem ); }
}





.fc-checkout-header .fc-checkout__cart-link-wrapper {
	position: absolute;
	top: 0;
	#{ $alignment-right }: #{ $container-spacing-mobile - $global-spacing-extra-small };
	margin: 0;

	display: flex;
	flex-direction: column;
	justify-content: center;
	height: $checkout-header-height;
	line-height: 1;

	@media (#{$bp-larger-than-mobile}) { #{ $alignment-right }: #{ $container-spacing-mobile }; } // Larger mobile devices
	@media (#{$bp-larger-than-tablet}) { #{ $alignment-right }: #{ $container-spacing-tablet }; }
	@media (#{$bp-larger-than-desktop}) { display: none; }
}
.fc-checkout-header .fc-checkout__cart-link {
	margin: $global-spacing-tiny 0;
	padding: $global-spacing-extra-small remsize( .8rem ) remsize( .8rem ) $global-spacing-extra-small;
	background-color: $white;
	border: solid remsize( .1rem ) $border-light-color;
	border-radius: $global-radius;
	box-shadow: $box-shadow-dark;
	font-size: $font-size-small;
	text-decoration: none;
	color: inherit;
	transition: all $global-animation-duration $global-animation-easing;

	&:active {
		box-shadow: none;
		transform: translateY( remsize( .1rem ) );
		color: inherit;
	}

	&:focus {
		outline: $focus-outline-link;
		outline-offset: $focus-outline-offset-link;
	}
}
.fc-checkout-header .fc-checkout__cart-link:before {
	@include icon( 'i-cart' );
	@include icon-size( $icon-size-small );

	margin-right: $global-spacing-extra-small;
}
.fc-checkout-header .fc-checkout__cart-link:after {
	@include icon( 'i-chevron-down' );
	@include icon-size( $icon-size-small );
}

.has-flyout--open-fc-checkout-order-review .fc-checkout-header .fc-checkout__cart-link {
	background-color: $lighter-grey;
	box-shadow: none;
	transform: translateY( remsize( .1rem ) );
}
.has-flyout--open-fc-checkout-order-review .fc-checkout-header .fc-checkout__cart-link:after {
	@include icon( 'i-chevron-up' );
}