.payment-methods {
	position: relative;

	.payment-methods-list {
		margin: 0;
	}

	.woopayments-request-jcb {
		margin: $grid-unit-30 $grid-unit-30 0 $grid-unit-30 !important;
	}

	.wcpay-tooltip__tooltip {
		&.wcpay-tooltip__tooltip--dark a {
			color: $white;
			text-decoration: underline;
		}
	}

	.wcpay-card-body:not( .payment-methods__express-checkouts ) {
		padding: 0;
	}

	.components-popover__content {
		position: relative;
		right: 120px;
	}

	&__header {
		justify-content: space-between;
	}

	&__heading {
		margin: 0;
		font-size: 16px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		line-height: 2em;

		> * {
			&:not( :last-child ) {
				margin-right: 4px;
			}
		}

		.wcpay-pill {
			padding: 2px $gap-smaller;
		}
	}

	&__express-checkouts {
		background: url( 'assets/images/payment-methods/all_local_payments.svg?asset' )
			no-repeat right;
		&.background-local-payment-methods {
			background: url( 'assets/images/payment-methods/local_payments.svg?asset' )
				no-repeat right;
			@media ( max-width: 1024px ) {
				h3,
				p {
					padding-right: 0;
				}
				background-image: none;
			}
		}
		background-size: auto;
		margin-right: 10px;

		h3 {
			font-size: 14px;
			padding-right: 215px;
		}
		p {
			padding-right: 230px;
		}

		&-get-started {
			margin-right: 16px;
		}
		&-actions {
			padding-top: 11px;
		}

		@media ( max-width: 1024px ) {
			h3,
			p {
				padding-right: 0;
			}
			background-image: none;
		}
	}

	.payment-methods-header {
		justify-content: flex-end;
	}

	&.is-loading {
		&::after {
			content: ' ';
			position: absolute;
			top: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			animation: loading-fade 1.6s ease-in-out infinite;
			// same color as $light-gray-500, but in rgb format
			background-color: rgba( 226, 228, 231, 0.65 );

			@media screen and ( prefers-reduced-motion: reduce ) {
				animation: none;
			}
		}
	}

	// Gutenberg compatibility adjustments. The component changed its classes and
	// styling in @wordpress/components 19.11.0. We're currently using 11.1.5.
	// To be removed when we upgrade this package.
	.components-popover {
		position: fixed;
	}
}

// RTL - hide flags dropdown for phone input
// @TODO find a way to make the dropdown working for LTR
.rtl {
	.iti {
		&__country-list {
			display: none;
		}
		&__arrow {
			display: none;
		}
	}
}
