// Add the margin-bottom variable so we can set the value with JS based on the computed style of the price element.
#payment-method-message {
	--wc-bnpl-margin-bottom: 0;
}

.pmme-loading {
	animation: pmme-loading 1s linear infinite alternate;
	background: #afafaf;
}

.summary,
.wp-block-woocommerce-product-price + {
	#payment-method-message {
		height: 4em;
		position: relative;

		.pmme-loading {
			position: absolute;
			width: 100%;
			max-width: 20em;
			height: 100%;
		}
	}
}

.cart_totals {
	#payment-method-message {
		margin: -8px 0 4px;
		height: var( --wc-bnpl-height );
		padding: 2px 1em 0;
		margin-bottom: var( --wc-bnpl-margin-bottom );

		&.pmme-updated {
			margin: -12px 0 0;
			padding: 0 1em;
		}

		&.skeleton {
			margin-bottom: 4px;
			background: #afafaf;
		}
	}

	.pmme-loading {
		height: var( --wc-bnpl-container-height );
		margin: -4px 1em var( --wc-bnpl-loader-margin ) 1em;
	}
}

@keyframes pmme-loading {
	0% {
		background-color: hsl( 204, 10%, 90% );
	}
	100% {
		background-color: hsl( 200, 20%, 95% );
	}
}

.wc-block-components-totals-wrapper.slot-wrapper
	.wc-block-components-bnpl-wrapper {
	padding-left: 17px;
	padding-right: 17px;
}
