@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

.credit-card-fields {
	display: none;
}


.credit-card-fields--is-loaded,
.credit-card-fields--placeholder {
	display: block;
}

.credit-card-fields__input-field {
	margin-block-start: 16px;

	&:first-of-type {
		margin-block-start: 0;
	}

	input {
		padding: 11px 16px;
		@include body-small;
		color: var(--color-neutral-80);
	}
}

.credit-card-fields__set-as-primary-field {
	.components-checkbox-control__input {
		&:checked {
			background: var(--color-accent);
			border-color: var(--color-accent);
		}

		&:disabled {
			opacity: 0.3;
			cursor: default;
		}
	}

	.components-checkbox-control__label {
		font-weight: 500;
	}
}

.credit-card-fields__label {
	display: block;

	&:hover {
		cursor: pointer;
	}
}

.credit-card-fields__label-text,
.credit-card-fields__input-field label {
	display: block;
	margin-bottom: 0.5rem;
	@include body-x-large;
	color: var(--color-neutral-80);
}

.credit-card-fields__stripe-error {
	display: block;
	margin-block-start: 0.5rem;
	color: var(--color-scary-50);
	@include body-small;
	font-style: italic;
}

.credit-card-fields__stripe-element {
	position: relative;
	display: block;
}

.credit-card-fields__stripe-element .StripeElement {
	display: block;
	width: 100%;
	@include body-medium;
	box-sizing: border-box;
	border: 1px solid var(--color-accent-60);
	color: var(--color-neutral-80);
	padding: 11px 16px;
}

.credit-card-fields__stripe-element--has-error .StripeElement {
	border-color: var(--color-scary-50);
}

.credit-card-fields__stripe-element .StripeElement--focus {
	outline: var(--color-primary-30) solid 2px;
}

.credit-card-fields__stripe-element .StripeElement--focus.StripeElement--invalid {
	outline: var(--color-scary-50) solid 2px;
}

.credit-card-fields--placeholder .credit-card-fields__field {
	margin-block-start: 1rem;
	width: 100%;
	height: 40px;
	@include placeholder( --color-neutral-10 );

	&:first-child {
		margin-block-start: 2rem;
	}

	&::before {
		content: "";
		width: 30%;
		height: 25px;
		@include placeholder( --color-neutral-10 );
	}
}
