assets/css/stripe-styles.scss

// TODO: Refactor this file to use SCSS syntax.
.wc-stripe-elements-field,
.wc-stripe-iban-element-field {
	border: 1px solid #ddd;
	margin: 5px 0;
	padding: 5px;
	background-color: #fff;
	outline: 0;
}
#payment .methods li.woocommerce-SavedPaymentMethods-token label {
	display: inline;
}
#payment .methods li.woocommerce-SavedPaymentMethods-new label {
	display: inline;
}

.woocommerce-checkout #payment ul.payment_methods li img.stripe-icon,
#add_payment_method #payment ul.payment_methods li img.stripe-icon {
	max-width: 40px;
	padding-left: 3px;
	margin: 0;
}

.woocommerce-checkout #payment ul.payment_methods li img.stripe-bancontact-icon,
#add_payment_method #payment ul.payment_methods li img.stripe-bancontact-icon {
	max-height: 65px;
	max-width: 45px;
}

.woocommerce-checkout #payment ul.payment_methods li img.stripe-ideal-icon,
#add_payment_method #payment ul.payment_methods li img.stripe-ideal-icon {
	max-height: 35px;
}

.woocommerce-checkout #payment ul.payment_methods li img.stripe-p24-icon,
#add_payment_method #payment ul.payment_methods li img.stripe-p24-icon {
	max-width: 65px;
}

.woocommerce-checkout #payment ul.payment_methods li img.stripe-alipay-icon,
#add_payment_method #payment ul.payment_methods li img.stripe-alipay-icon {
	max-width: 50px;
}

.woocommerce-checkout #payment ul.payment_methods li img.stripe-sofort-icon,
#add_payment_method #payment ul.payment_methods li img.stripe-sofort-icon {
	max-width: 55px;
}

.woocommerce-checkout #payment ul.payment_methods li img.stripe-sepa-icon,
#add_payment_method #payment ul.payment_methods li img.stripe-sepa-icon {
	max-width: 50px;
}

.woocommerce-checkout #payment ul.payment_methods li img.stripe-multibanco-icon,
#add_payment_method #payment ul.payment_methods li img.stripe-multibanco-icon {
	max-height: 30px;
}

.woocommerce-checkout #payment ul.payment_methods li img.stripe-eps-icon,
#add_payment_method #payment ul.payment_methods li img.stripe-eps-icon {
	max-height: 30px;
}

.woocommerce-checkout #payment ul.payment_methods li img.stripe-giropay-icon,
#add_payment_method #payment ul.payment_methods li img.stripe-giropay-icon {
	max-width: 50px;
}

.woocommerce-checkout #payment ul.payment_methods li .stripe-credit-card-brand,
#add_payment_method #payment ul.payment_methods li .stripe-credit-card-brand {
	position: absolute;
	top: 50%;
	margin-top: -10px;
	right: 10px;
	background: no-repeat url( '../images/credit-card.svg' );
	display: block;
	width: 30px;
	height: 24px;
}

.woocommerce-checkout #payment ul.payment_methods li .stripe-visa-brand,
#add_payment_method #payment ul.payment_methods li .stripe-visa-brand {
	position: absolute;
	top: 50%;
	margin-top: -10px;
	right: 10px;
	background: no-repeat url( '../images/visa.svg' );
	display: block;
	width: 30px;
	height: 24px;
}

.woocommerce-checkout #payment ul.payment_methods li .stripe-amex-brand,
#add_payment_method #payment ul.payment_methods li .stripe-amex-brand {
	position: absolute;
	top: 50%;
	margin-top: -10px;
	right: 10px;
	background: no-repeat url( '../images/amex.svg' );
	display: block;
	width: 30px;
	height: 24px;
}

.woocommerce-checkout #payment ul.payment_methods li .stripe-diners-brand,
#add_payment_method #payment ul.payment_methods li .stripe-diners-brand {
	position: absolute;
	top: 50%;
	margin-top: -10px;
	right: 10px;
	background: no-repeat url( '../images/diners.svg' );
	display: block;
	width: 30px;
	height: 24px;
}

.woocommerce-checkout #payment ul.payment_methods li .stripe-discover-brand,
#add_payment_method #payment ul.payment_methods li .stripe-discover-brand {
	position: absolute;
	top: 50%;
	margin-top: -10px;
	right: 10px;
	background: no-repeat url( '../images/discover.svg' );
	display: block;
	width: 30px;
	height: 24px;
}

.woocommerce-checkout #payment ul.payment_methods li .stripe-jcb-brand,
#add_payment_method #payment ul.payment_methods li .stripe-jcb-brand {
	position: absolute;
	top: 50%;
	margin-top: -10px;
	right: 10px;
	background: no-repeat url( '../images/jcb.svg' );
	display: block;
	width: 30px;
	height: 24px;
}

.woocommerce-checkout #payment ul.payment_methods li .stripe-maestro-brand,
#add_payment_method #payment ul.payment_methods li .stripe-maestro-brand {
	position: absolute;
	top: 50%;
	margin-top: -10px;
	right: 10px;
	background: no-repeat url( '../images/maestro.svg' );
	display: block;
	width: 30px;
	height: 24px;
}

.woocommerce-checkout #payment ul.payment_methods li .stripe-mastercard-brand,
#add_payment_method #payment ul.payment_methods li .stripe-mastercard-brand {
	position: absolute;
	top: 50%;
	margin-top: -10px;
	right: 10px;
	background: no-repeat url( '../images/mastercard.svg' );
	display: block;
	width: 30px;
	height: 24px;
}

.woocommerce-checkout #payment ul.payment_methods .stripe-card-group,
#add_payment_method #payment ul.payment_methods .stripe-card-group {
	position: relative;
}

.woocommerce-SavedPaymentMethods-token
	.stripe-source-errors
	.woocommerce-error {
	margin-top: 1em;
	margin-bottom: 2em;
}

#wc-stripe-custom-button {
	display: block;
	width: 100%;
}

.woocommerce-checkout #payment #stripe_boleto_tax_id {
	width: 100%;
}

.gpay-button {
	background-origin: content-box;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	height: 40px;
	min-height: 40px;
	padding: 11px 24px;
	width: 100%;

	&.light {
		// account for button box-shadow when setting width
		width: calc( 100% - 3px );
		background-color: #fff;

		// Add vertical margin to make box-shadow visible in blocks.
		margin: 2px 0 3px 0;

		&:active {
			background-color: #fff;
		}
		&:hover {
			background-color: #f8f8f8;
		}
		&:focus {
			box-shadow: #e8e8e8 0 1px 1px 0, #e8e8e8 0 1px 3px;
			outline: 0;
		}
	}

	&.light-outline {
		// account for button box-shadow when setting width
		width: calc( 100% - 3px );
		background-color: #fff;

		// The box-shadow forms the outline and as such is always on.
		box-shadow: rgba( 60, 64, 67, 0.3 ) 0px 1px 1px 0,
			rgba( 60, 64, 67, 0.15 ) 0 1px 3px 1px;

		// Add vertical margin to make box-shadow visible in blocks.
		margin: 2px 0 3px 0;

		&:active {
			background-color: #fff;
		}
		&:hover {
			background-color: #f8f8f8;
		}
		&:focus {
			box-shadow: #e8e8e8 0 1px 1px 0, #e8e8e8 0 1px 3px;
			outline: 0;
		}
	}

	&.dark {
		background-color: #000;
		padding: 12px 24px 10px;
		&:active {
			background-color: #5f6368;
		}
		&:hover {
			background-color: #3c4043;
		}
		&:focus {
			box-shadow: #5f6368 0 1px 1px 0, #5f6368 0 1px 3px;
			outline: 0;
		}
	}

	&.short {
		&.light,
		&.light-outline {
			background-image: url( https://www.gstatic.com/instantbuy/svg/light_gpay.svg );
		}
		&.dark {
			background-image: url( https://www.gstatic.com/instantbuy/svg/dark_gpay.svg );
		}
	}
}