.wsf-form-canvas .mollie-component {
	background-color: var(--wsf-field-background-color);
	border: var(--wsf-field-border);
	border-radius: var(--wsf-field-border-radius);
	color: var(--wsf-field-color);
	cursor: text;
	font-family: var(--wsf-form-font-family);
	font-size: var(--wsf-form-font-size);
	height: var(--wsf-field-height)>;
	line-height: var(--wsf-field-line-height);
	padding: var(--wsf-field-padding);
	width: 100%;
}

.wsf-form-canvas .mollie-component:hover {
	background-color: var(--wsf-field-background-color-hover);
	border-color: var(--wsf-field-border-color-hover);
	color: var(--wsf-field-color-hover);
}

.wsf-form-canvas .mollie-component--focus {
	background-color: var(--wsf-field-background-color-focus);
	border-color: var(--wsf-field-border-color-focus);
	box-shadow: var(--wsf-form-box-shadow);
	color: var(--wsf-field-color-focus);
	outline: 0;
}

.wsf-form-canvas .mollie-component--invalid {
	background-color: var(--wsf-field-background-color-invalid);
	border-color: var(--wsf-field-border-color-invalid);
	color: var(--wsf-field-color-invalid);
}

.wsf-form-canvas .mollie-component--invalid--focus {
	box-shadow: var(--wsf-form-box-shadow);
}

.Mollie--webkit-autofill {
	background-color: var(--wsf-field-background-color) !important;
}

.Mollie.callout {
	padding: 0.5rem;
}

.wsf-form-canvas.wsf-transition .mollie-component {
	transition: background-color var(--wsf-form-transition), border-color var(--wsf-form-transition), box-shadow var(--wsf-form-transition);
}