@use "sass:math" as math;

// ------------------------------------
// ORDER SUMMARY
// ------------------------------------
.fc-wrapper .fc-checkout-order-review {
	margin: $order-summary-container-margin;
	padding: $order-summary-container-padding;

	@media (#{$bp-larger-than-desktop}) {
		margin: $order-summary-container-margin--large-screen;
		padding: $order-summary-container-padding--large-screen;
	}
}




// Fix layout for the `#order_review` element
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review {
	float: none;
	padding: 0;
	margin: 0;
	border: 0;
	width: 100%;
	background-color: transparent;
}
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review:before,
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review:after {
	display: none;
}



body#{ $_body-page-selector } div.woocommerce .fc-wrapper .fc-checkout-order-review__head {
	text-align: $alignment-left;
}

body#{ $_body-page-selector } div.woocommerce .fc-wrapper .fc-checkout-order-review-title {
	display: inline-block;
	margin: 0 0 remsize( 1.5rem );
	padding: 0;
	width: auto;
	color: $checkout-substep-title-color;
	font-weight: $checkout-substep-title-font-weight;
	font-size: $checkout-substep-title-font-size;
	text-transform: $checkout-substep-title-text-transform;
	text-align: $checkout-substep-title-text-align;
	line-height: 1;
	overflow: unset;

	@media (#{$bp-larger-than-desktop}) { font-size: $checkout-substep-title-font-size--large-screen; }
}
body#{ $_body-page-selector } div.woocommerce .fc-wrapper .fc-checkout-order-review-title:before,
body#{ $_body-page-selector } div.woocommerce .fc-wrapper .fc-checkout-order-review-title:after {
	width: auto;
}





div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table {
	margin: $order-summary-table-margin;
	padding: 0;
	width: $order-summary-table-width;
	max-width: $order-summary-table-width;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: $order-summary-font-size;

	@media (#{$bp-larger-than-desktop}) {
		margin: $order-summary-table-margin--large-screen;
		width: $order-summary-table-width--large-screen;
		font-size: $order-summary-font-size--large-screen;
	}
}

body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table thead,
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tbody,
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tfoot {
	border: none;
}

body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tbody::after {
	display: none;
}

body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table th,
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table td,
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tr:first-child th,
body#{ $_body-page-selector } div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tr:first-child td {
	border: 0;
	display: table-cell;
	width: auto;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tr {
	border: 0;
	border-bottom: $order-summary-cell-border;
	height: auto;
	display: table-row;
}
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tr:first-child {
	border-top: $order-summary-cell-border;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table th,
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table td {
	padding: $order-summary-cell-padding-vertical $order-summary-cell-padding-horizontal;
	background-color: transparent;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table:not( .fc-cart-review-order-table ) tfoot tr:first-child {
	border-top-width: 0;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tfoot th {
	vertical-align: middle;
	width: 50%;
	text-align: $alignment-left;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .product-total,
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tfoot td {
	width: 50%;
	font-size: $order-summary-font-size;
	text-align: $alignment-right;
	line-height: 1;
	vertical-align: middle;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .product-total .tax_label,
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .product-total .includes_tax,
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tfoot td .includes_tax,
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tfoot td .tax_label {
	display: block;
	width: 100%;
	line-height: 1.2;
	color: $grey;
	white-space: normal;
}




div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .cart_item td {
	margin: 0;
	width: 100%;
	white-space: normal;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .product-name,
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tr:first-child .product-name {
	position: relative;
	float: $alignment-left;
	width: 75%;
	padding: $global-spacing-tiny;
	background-color: transparent;
	text-align: $alignment-left;
	line-height: 1.2;
}
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tr:first-child .product-name:after {
	@include clearfix();
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .product-total,
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table tr:first-child .product-total {
	display: block;
	padding: $global-spacing-tiny 0;
	width: 25%;
	float: $alignment-right;
	background-color: transparent;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table img {
	float: $alignment-left;
	margin-#{ $alignment-left }: - #{ $order-summary-image-padding + $global-spacing-tiny };
	padding: $order-summary-image-padding;
	width: $order-summary-image-width !important; // Needed to override inline styles added by some themes
	height: auto !important; // Needed to override inline styles added by some themes
	background-color: $order-summary-image-background-color;
	border: $order-summary-image-border;
	border-radius: $order-summary-image-border-radius;

	@media (#{$bp-larger-than-desktop}) {
		width: $order-summary-image-width--large-screen !important; // Needed to override inline styles added by some themes
		height: auto !important;  // Needed to override inline styles added by some themes
	}
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .product-details {
	float: $alignment-left;
	padding-#{ $alignment-left }: $global-spacing-small;
	width: calc( 100% - $order-summary-image-width );

	@media (#{$bp-larger-than-desktop}) {
		width: calc( 100% - $order-summary-image-width--large-screen );
	}
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .product-quantity {
	z-index: z( 'above' );
	position: absolute;
	top: 0;
	#{ $alignment-left }: #{ $order-summary-image-width + $global-spacing-tiny };
	transform: $order-summary-quantity-transform;
	display: block;
	padding: remsize( .1rem ) remsize( .6rem ) remsize( .2rem ) $global-spacing-tiny;
	border-radius: #{ math.div( $font-size-extra-small + remsize( .4rem ), 2 ) };
	background-color: $order-summary-quantity-background-color;
	color: $order-summary-quantity-text-color;
	font-size: $order-summary-quantity-font-size;
	font-weight: normal;
	line-height: 1;
	letter-spacing: 0;

	@media (#{$bp-larger-than-desktop}) {
		#{ $alignment-left }: #{ $order-summary-image-width--large-screen + $global-spacing-tiny };
	}
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table dl.variation {
	margin-bottom: 0;
	padding-left: 0;
	color: $grey;
	font-size: $font-size-extra-small;
}
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table dl.variation dd {
	margin: 0;
	padding: 0;
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .order-total th {
	text-transform: uppercase;
}
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .order-total th,
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .order-total td {
	padding-top: $order-summary-cell-padding-vertical--total;
	padding-bottom: $order-summary-cell-padding-vertical--total;
}



div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .cart-discount .woocommerce-remove-coupon {
	&:focus {
		outline: $focus-outline-link;
		outline-offset: $focus-outline-offset-link;
	}
}

div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .coupon-code-form td {
	text-align: $alignment-left;
}





// ------------------------------------
// ORDER REVIEW VISIBILITY
// ------------------------------------
.fc-checkout-step[data-step-id="payment"] .fc-checkout-order-review {
	@media (#{$bp-larger-than-desktop}) {
		display: none;
	}
}





// ------------------------------------
// FLYOUT ORDER SUMMARY
// ------------------------------------
.fc-wrapper .fc-checkout-order-review[data-flyout] {
	@media (#{$bp-larger-than-desktop}) {
		position: static;
		transform: none;
	}
}
.fc-wrapper .fc-checkout-order-review[data-flyout].is-activated {
	@media (#{$bp-larger-than-desktop}) {
		display: block;
	}
}

.fc-wrapper .fc-checkout-order-review[data-flyout].is-activated.is-open {
	z-index: z( 'float-element' );
	margin: 0;
	padding: $checkout-header-height 0 0;
}
// With admin bar
.admin-bar .fc-wrapper .fc-checkout-order-review[data-flyout].is-activated.is-open {
	padding: calc( #{ $checkout-header-height } + 46px ) 0 0;
}



.has-flyout.has-flyout--open-fc-checkout-order-review .flyout-overlay {
	display: none;
}



div.woocommerce .fc-wrapper .fc-checkout-order-review .fc-checkout-order-review__inner {
	height: auto;
	margin: $order-summary-table-margin;
	padding: remsize( 1.2rem ) $order-summary-cell-padding-horizontal 0;
	width: $order-summary-table-width;

	@media (#{$bp-larger-than-desktop}) {
		margin: 0 0 $global-spacing-small;
		width: 100%;
		max-width: 100%;
		border: solid remsize( .1rem ) $border-color;
		border-radius: $checkout-substep-border-radius;
		background-color: $white;
		overflow: hidden;
	}

	&:focus {
		outline: $focus-outline-field;
		outline-offset: $focus-outline-offset-field;
	}
}

.fc-wrapper .fc-checkout-order-review[data-flyout].is-open .fc-checkout-order-review__inner {
	height: 100%;
	width: 100%;
	margin: 0;
}



// ------------------------------------
// PLACE ORDER ONLY IN SIDEBAR
// ------------------------------------
body.has-place-order-sidebar-only .fc-wrapper .fc-checkout-order-review {
	display: block;
	padding: 0;
}

body.has-place-order-sidebar-only .fc-wrapper .fc-checkout-order-review .fc-checkout-order-review__inner {
	max-width: none;
	overflow: unset;

	@media (#{$bp-smaller-than-tablet}) {
		padding-bottom: $global-spacing-small;
		padding-#{ $alignment-left }: $container-spacing-mobile;
		padding-#{ $alignment-right }: $container-spacing-mobile;
	}

	@media (#{$bp-larger-than-tablet}) {
		margin: 0 0 $global-spacing-small;
		padding: remsize( 1.2rem ) $global-spacing-small 0;
		width: 100%;
		max-width: 100%;
		border: solid remsize( .1rem ) $border-color;
		border-radius: $checkout-substep-border-radius;
		background-color: $white;
		overflow: hidden;
	}
}

body.has-place-order-sidebar-only .fc-wrapper .fc-checkout-order-review[data-flyout].is-activated.is-open .fc-checkout-order-review__inner {
	border: 0;
	border-radius: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

body.has-place-order-sidebar-only .fc-wrapper .fc-checkout-steps {
	@media (#{$bp-smaller-than-tablet}) {
		margin-bottom: 0;
	}
}




// ------------------------------------
// ORDER SUMMARY ACTIONS
// ------------------------------------
.fc-checkout-order-review__actions-mobile {
	display: none;
}
.has-flyout.has-flyout--open-fc-checkout-order-review .fc-checkout-order-review__actions-mobile {
	z-index: z( 'sticky-element' );
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background-color: $white;
	box-shadow: $box-shadow-dark;

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

	// padding
	padding: $global-spacing-extra-small $container-spacing-mobile;
	@media (#{$bp-larger-than-tablet}) { padding: $global-spacing-small $container-spacing-tablet; }

	// Hide on desktop view
	@media (#{$bp-larger-than-desktop}) { display: none; }
}



.fc-checkout-order-review__actions-mobile .fc-checkout-order-review__edit-cart {
	margin: 0 0 0 #{ - $global-spacing-extra-small };
	padding-left: $global-spacing-extra-small;
	padding-right: $global-spacing-extra-small;

	&:focus {
		outline: $focus-outline-link;
		outline-offset: $focus-outline-offset-link;
	}
}

.fc-checkout-order-review__actions-mobile .fc-checkout-order-review__close-order-summary {
	margin: 0 #{ - $global-spacing-extra-small } 0 0;
	height: remsize( 4.4rem );

	&:focus {
		outline: $focus-outline-button;
		outline-offset: $focus-outline-offset-button;
	}
}



.fc-checkout-order-review__sidebar-actions {
	display: none;

	@media (#{$bp-larger-than-desktop}) { display: block; }
}




.fc-checkout-order-review__head .fc-checkout-order-review__edit-cart {
	position: relative;
	#{ $alignment-right }: $order-summary-edit-cart-button-right;

	float: $alignment-right;
	display: block;

	margin: $order-summary-edit-cart-button-margin;
	padding: $order-summary-edit-cart-button-padding;
	font-size: $order-summary-edit-cart-button-font-size--large-screen;
	font-weight: $order-summary-edit-cart-button-font-weight;
	line-height: 1;
	text-decoration: $order-summary-edit-cart-button-text-decoration;
	color: $order-summary-edit-cart-button-color;
	background-color: $order-summary-edit-cart-button-background-color;
	cursor: pointer;


	&:focus {
		outline: $focus-outline-link;
		outline-offset: $focus-outline-offset-link;
	}
}
