@import '../style';

#payment .payment_method_woocommerce_payments .testmode-info {
	margin-bottom: 0.5em;
}

#wcpay-upe-element,
.wcpay-upe-element {
	padding: 7px 7px;
	margin-bottom: 0.5em;

	&.processing {
		min-height: 70px;
	}
}

.wcpay-checkout-email-field {
	position: relative;
}

// Stripe Link button styles.
.wcpay-checkout-email-field button.wcpay-stripelink-modal-trigger {
	display: none;
	position: absolute;
	right: 5px;
	width: 64px;
	height: 40px;
	background: no-repeat url( 'assets/images/payment-methods/link.svg?asset' );
	background-color: none;
	cursor: pointer;
	border: none;
}

// Logo styles.
#payment .payment_methods {
	li[class*='payment_method_woocommerce_payments'] label {
		display: inline;
		.payment-methods--logos {
			float: right;

			img:last-of-type {
				margin-right: 0;
			}
		}
		img {
			float: right;
			border: 0;
			padding: 0;
			height: 24px !important;
			max-height: 24px !important;
		}
		.logo-popover {
			background-color: #fff;
			border: 1px solid $gray-300;
			border-radius: 3px;
			padding: 8px;
			box-sizing: border-box;
			box-shadow: 0 0 10px 0 rgba( 0, 0, 0, 0.1 );
			display: grid;
			gap: 8px;
			justify-content: center;
			cursor: pointer;

			> img {
				box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.1 );
				width: 38px;
				height: 24px;
			}
		}
	}
}

// Pseudo-element radio button compatibility.
// Unfortunately, there is no direct way to detect the existence of pseudo-elements like ::before using CSS selectors,
// so we use the theme class to add the necessary styles.
.theme-storefront,
.theme-twentytwenty,
.theme-twentytwentyone,
.theme-twentytwentytwo,
.theme-twentytwentythree {
	#payment {
		.payment_methods {
			> li.wc_payment_method {
				// Storefront does not render the input radio button.
				grid-template-areas: 'li-label'; // List Item grid for Storefront.
				grid-template-columns: 1fr;

				> input + label {
					// Storefront uses a label::before for the radio button so we need to adjust the grid.
					grid-template-areas: 'label-before label-spacer label-inner'; // Label grid for Storefront.
					grid-template-columns: max-content max-content 1fr;
				}

				> input + label {
					&::before {
						grid-area: label-before;
					}
				}
			}

			// This makes sure labels that don't have the pmme container are displayed correctly.
			li[class*='payment_method_woocommerce_payments'] {
				> input + label {
					display: block;
				}
			}
		}
	}
}
