.wc-block-mini-cart {
	background-color: transparent !important;
	display: flex;
	justify-content: flex-end;

	&.align-center {
		justify-content: center;
	}

	&.align-left {
		justify-content: flex-start;
	}

	&.is-transparent .wc-block-mini-cart__button {
		background-color: transparent !important;
	}
}

.wc-block-mini-cart__button {
	align-items: center;
	border: none;
	color: inherit;
	display: flex;
	font-weight: 400;
	padding: em($gap-small) em($gap-smaller);

	&:hover {
		opacity: 0.6;
	}
}

.wc-block-mini-cart__amount {
	display: none;
}

.wc-block-mini-cart__tax-label {
	margin-right: em($gap-smaller);
}

@media screen and (min-width: 768px) {
	.wc-block-mini-cart__amount {
		display: initial;
		font-weight: 600;
		margin-right: $gap-smaller;
	}
}

.modal-open .wc-block-mini-cart__button {
	pointer-events: none;
}

// Reset font size so it doesn't depend on drawer's ancestors.
.wc-block-mini-cart__drawer {
	font-size: 1rem;

	.components-modal__content {
		padding: 0;
		position: relative;
	}

	.components-modal__header {
		position: absolute;
		top: $gap-largest;
		right: $gap;
	}

	.wc-block-mini-cart__items {
		flex-grow: 1;
		overflow-y: auto;
		padding: 0 $gap;

		.wc-block-cart-items__row:last-child::after {
			content: none;
		}
	}
}

// @todo Review the class naming convention for Mini Cart inner blocks.
.wp-block-woocommerce-mini-cart-contents {
	background: #fff;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100vh;
	padding: 0;
	justify-content: center;
}

.wc-block-mini-cart__title {
	@include font-size(large);
	margin: $gap-largest $gap 0;
}

.wc-block-mini-cart__footer {
	border-top: 1px solid $gray-300;
	padding: $gap-large $gap;
}

.wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal {
	font-weight: 600;
	margin-bottom: $gap;

	.wc-block-components-totals-item__description {
		display: none;
		font-size: 0.75em;
		font-weight: 400;

		@media only screen and (min-width: 480px) {
			display: unset;
		}
	}
}

.wc-block-mini-cart__footer-actions {
	display: flex;
	gap: $gap;

	.wc-block-mini-cart__footer-cart.wc-block-components-button {
		background-color: transparent;
		border: 1px solid $gray-900;
		color: $gray-900;
		display: none;
		flex-grow: 1;
		font-weight: 600;

		@media only screen and (min-width: 480px) {
			display: inline-flex;
		}
	}

	.wc-block-mini-cart__footer-checkout {
		border: 1px solid $gray-900;
		flex-grow: 1;
		font-weight: 600;
	}
}

.wc-block-mini-cart__footer .wc-block-components-payment-method-icons {
	margin-top: $gap;
}