/**
 * Card field style.
 *
 * @link https://github.com/mollie/components-examples
 */
.pronamic-pay-mollie-card-field {
	display: flex;

	flex-flow: row wrap;

	gap: 1em;

	.mollie-card-component {
		flex: 2 1 100%;

		&--expiryDate,
		&--verificationCode {
			flex: 1 2 auto;
		}

		&__error {
			color: #a00;
		}
	}

	.mollie-component {
		background: #fff;

		border: 1px solid #767676;
		border-radius: 3px;

		padding: 0.5em;

		&.is-invalid {
			border-color: #a00;
		}
	}
}
