style.scss

@import '../style';

.wcpay-payment-element {
	margin-bottom: 2rem;
}

/* stylelint-disable-next-line selector-id-pattern */
#express-payment-method-woopay {
	width: 100%;
}

.wc-block-components-main
	.wc-block-components-checkout-step--with-step-number
	.wc-block-components-checkout-step__content
	> :last-child {
	padding: 0;
}

#contact-fields {
	padding-bottom: 1.5em;
}

.wc-block-components-text-input button.wcpay-stripelink-modal-trigger {
	top: 50%;
	transform: translateY( -50% );
}

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: transparent;
	cursor: pointer;
	border: none;
}

button.wcpay-stripelink-modal-trigger:hover {
	background-color: transparent;
	border-color: transparent;
}

.wc-block-checkout__payment-method {
	.wc-block-components-radio-control__label {
		width: 100%;
		display: block !important;

		> .payment-method-label {
			display: grid !important;
			justify-content: normal !important;
			grid-template-columns: max-content auto;
			grid-template-areas: 'label badge logos';
			align-items: center;
			gap: 8px;
			width: 100%;

			> .payment-method-label__label {
				grid-area: label;
				width: 100%;
			}

			> .payment-methods--logos {
				grid-area: logos;
				justify-self: end;
			}

			> .test-mode.badge {
				grid-area: badge;
				background-color: #fff2d7;
				border-radius: 4px;
				padding: 4px 6px;
				font-size: 12px;
				font-weight: 400;
				line-height: 16px;
				color: #4d3716;
				justify-self: start;
				width: max-content;
			}

			@include breakpoint( '<480px' ) {
				grid-template-areas: 'label logos' 'badge badge';
				grid-template-columns: 1fr auto;
				align-items: start;

				.payment-methods--logos {
					justify-self: end;
				}
			}
		}

		.bnpl-message {
			width: 100%;

			@include breakpoint( '<480px' ) {
				margin-top: 8px;
			}
		}
	}
}

#remember-me {
	margin: 36px 0 0 0;

	h2 {
		font-size: 18px;
		font-weight: 600;
		line-height: 21.6px;
		letter-spacing: -0.01em;
	}
}

#payment-method {
	label.wc-block-components-radio-control__option-checked {
		.StripeElement {
			display: none;
		}
	}
	/* stylelint-disable-next-line selector-id-pattern */
	#radio-control-wc-payment-method-options-woocommerce_payments_affirm__label
		img {
		min-width: 50px;
	}
	/* stylelint-disable-next-line selector-id-pattern */
	#radio-control-wc-payment-method-options-woocommerce_payments_afterpay_clearpay__label
		img {
		min-width: 64px;
	}
}

@import '../woopay/style';
@import '../../components/loadable/style';