woocommerce/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/style.scss

.wc-block-cart {
	.wc-block-components-shipping-calculator {
		white-space: nowrap;
	}

	.wc-block-components-address-form {
		.wc-block-components-text-input,
		.wc-block-components-country-input,
		.wc-block-components-state-input {
			&:first-of-type {
				margin-top: 0;
			}
		}
	}
}

table.wc-block-cart-items,
table.wc-block-cart-items th,
table.wc-block-cart-items td {
	// Override Storefront theme gray table background.
	background: none !important;
	// Remove borders on default themes.
	border: 0;
	margin: 0;
}

.editor-styles-wrapper table.wc-block-cart-items,
table.wc-block-cart-items {
	width: 100%;

	.wc-block-cart-items__header {
		@include font-size( smaller );
		text-transform: uppercase;

		.wc-block-cart-items__header-image {
			width: 100px;
		}
		.wc-block-cart-items__header-product {
			visibility: hidden;
		}
		.wc-block-cart-items__header-total {
			width: 100px;
			text-align: right;
		}
	}
	.wc-block-cart-items__row {
		.wc-block-cart-item__image img {
			width: 100%;
			margin: 0;
		}
		.wc-block-cart-item__quantity {
			.wc-block-cart-item__remove-link {
				@include link-button;
				@include font-size( smaller );

				text-transform: none;
				white-space: nowrap;
			}
		}
		.wc-block-components-product-name {
			display: block;
			max-width: max-content;
		}
		.wc-block-cart-item__total {
			@include font-size( regular );
			text-align: right;
			line-height: inherit;
		}
		.wc-block-components-product-metadata {
			margin-bottom: 0.75em;
		}

		&.is-disabled {
			opacity: 0.5;
			pointer-events: none;
			transition: opacity 200ms ease;
		}
	}
}

.wc-block-cart {
	.wc-block-components-totals-taxes,
	.wc-block-components-totals-footer-item {
		margin: 0;
	}
}

// Loading placeholder state.
.wc-block-cart--is-loading,
.wc-block-mini-cart__drawer.is-loading {
	th span,
	h2 span {
		@include placeholder();
		@include force-content();
		min-width: 84px;
		display: inline-block;
	}
	h2 span {
		min-width: 33%;
	}
	.wc-block-components-product-price,
	.wc-block-components-product-metadata,
	.wc-block-components-quantity-selector {
		@include placeholder();
	}
	.wc-block-components-product-name {
		@include placeholder();
		@include force-content();
		min-width: 84px;
		display: inline-block;
	}
	.wc-block-components-product-metadata {
		margin-top: 0.25em;
		min-width: 8em;
	}
	.wc-block-cart-item__remove-link {
		visibility: hidden;
	}
	.wc-block-cart-item__image > a {
		@include placeholder();
		display: block;
	}
	.wc-block-components-product-price {
		@include force-content();
		max-width: 3em;
		display: block;
		margin-top: 0.25em;
	}
	.wc-block-cart__sidebar .components-card {
		@include placeholder();
		@include force-content();
		min-height: 460px;
	}
}
.wc-block-components-sidebar-layout.wc-block-cart--skeleton {
	display: none;
}
.is-loading + .wc-block-components-sidebar-layout.wc-block-cart--skeleton {
	display: flex;
}

.wc-block-cart-item__total-price-and-sale-badge-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-end;

	.wc-block-components-sale-badge {
		margin-top: $gap-smallest;
	}
}

.is-small,
.is-mobile {
	.wc-block-cart-item__total {
		.wc-block-components-sale-badge {
			display: none;
		}
	}
}

.is-medium,
.is-small,
.is-mobile {
	&.wc-block-cart {
		.wc-block-components-sidebar {
			.wc-block-cart__totals-title {
				display: none;
			}
		}
	}
	table.wc-block-cart-items {
		td {
			padding: 0;
		}
		.wc-block-cart-items__header {
			display: none;
		}
		.wc-block-cart-item__remove-link {
			display: none;
		}
		.wc-block-cart-items__row {
			@include with-translucent-border( 0 0 1px );
			display: grid;
			grid-template-columns: 80px 132px;
			padding: $gap 0;

			.wc-block-cart-item__image {
				grid-column-start: 1;
				grid-row-start: 1;
				padding-right: $gap;
			}
			.wc-block-cart-item__product {
				grid-column-start: 2;
				grid-column-end: 4;
				grid-row-start: 1;
				justify-self: stretch;
				padding: 0 $gap $gap 0;
			}
			.wc-block-cart-item__quantity {
				grid-column-start: 1;
				grid-row-start: 2;
				vertical-align: bottom;
				padding-right: $gap;
				align-self: end;
				padding-top: $gap;
			}
			.wc-block-cart-item__total {
				grid-row-start: 1;

				.wc-block-components-formatted-money-amount {
					display: inline-block;
				}
			}
		}
	}
}

.is-large.wc-block-cart {
	margin-bottom: 3em;

	.wc-block-cart-items {
		@include with-translucent-border( 0 0 1px );

		th {
			padding: 0.25rem $gap 0.25rem 0;
			white-space: nowrap;
		}
		td {
			@include with-translucent-border( 1px 0 0 );
			padding: $gap 0 $gap $gap;
			vertical-align: top;
		}
		th:last-child {
			padding-right: 0;
		}
		td:last-child {
			padding-right: $gap;
		}
	}

	.wc-block-components-radio-control__input {
		left: 0;
	}

	.wc-block-cart__totals-title {
		@include text-heading();
		@include font-size( smaller );
		display: block;
		font-weight: 600;
		padding: 0.25rem 0;
		text-align: right;
		text-transform: uppercase;
	}

	.wc-block-components-sidebar {
		.wc-block-components-shipping-calculator,
		.wc-block-components-shipping-rates-control__package:not(.wc-block-components-panel) {
			padding-left: $gap;
			padding-right: $gap;
		}
	}

	.wc-block-cart__payment-options {
		padding: $gap 0 0;
	}
}

.wp-block-woocommerce-cart.is-loading {
	.wp-block-woocommerce-empty-cart-block {
		display: none;
	}
	.wp-block-woocommerce-filled-cart-block {
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto $gap;
		position: relative;
	}

	.wp-block-woocommerce-cart-items-block {
		box-sizing: border-box;
		margin: 0;
		padding-right: percentage(math.div($gap-largest, 1060px)); // ~1060px is the default width of the content area in Storefront.
		width: 65%;
		min-height: 10em;
	}

	.wp-block-woocommerce-cart-line-items-block {
		min-height: 15em;
		display: block;
		@include placeholder();
	}

	.wp-block-woocommerce-cart-totals-block {
		box-sizing: border-box;
		margin: 0;
		padding-left: percentage(math.div($gap-large, 1060px));
		width: 35%;
		min-height: 12em;
	}

	.wp-block-woocommerce-cart-order-summary-block,
	.wp-block-woocommerce-cart-express-payment-block,
	.wp-block-woocommerce-proceed-to-checkout-block,
	.wp-block-woocommerce-cart-accepted-payment-methods-block {
		min-height: 3em;
		display: block;
		@include placeholder();
		margin: 0 0 1em 0;
	}

	.wp-block-woocommerce-cart-order-summary-block {
		height: 20em;
	}
}

// Skeleton is shown before mobile classes are appended.
@media only screen and ( max-width: 700px ) {
	.wp-block-woocommerce-cart.is-loading {
		padding-top: $gap;

		.wp-block-woocommerce-filled-cart-block {
			flex-direction: column;
			margin: 0 auto $gap;
		}

		.wp-block-woocommerce-cart-items-block {
			padding: 0;
			width: 100%;
		}

		.wp-block-woocommerce-cart-totals-block {
			padding: 0;
			width: 100%;
		}
	}
}