@import '../../stylesheets/abstracts/colors';
@import '../../stylesheets/abstracts/variables';
@import '/node_modules/intl-tel-input/build/css/intlTelInput.css';

.woopay-save-new-user-container {
	display: flex;
	flex-direction: column;
	gap: $gap;

	&:not( :empty ) {
		#payment .wc_payment_methods.payment_methods.methods + & {
			margin-top: $gap-large;

			+ .place-order {
				margin-top: $gap-large;
			}
		}
	}

	h3 {
		margin-bottom: 0;
	}

	.components-checkbox-control__input-container {
		margin-right: $gap-smaller;
		height: auto;

		.components-checkbox-control__input[type='checkbox'] {
			height: 16px;
			width: 16px;
		}

		svg {
			height: 16px;
			width: 16px;
			left: 0;
			top: 0;
		}

		label {
			font-size: 14px;
		}
	}

	.save-details-form.form-row {
		display: flex;
		flex-direction: column;
		font-size: 1rem;
		line-height: 1.25rem;
		font-weight: 400;
		gap: $gap;
		transition: max-height 0.5s ease-in-out;
		margin: 0 !important;
		padding: 0 !important;
		overflow-y: hidden;
		max-height: 21.875rem;

		&::before,
		&::after {
			display: none;
		}

		> div {
			margin-top: 0;
		}

		.additional-information {
			font-size: 14px;
			font-weight: 400;
			line-height: 21px;
			text-align: left;
		}

		.tos {
			font-size: 12px;
		}

		#validate-error-invalid-woopay-phone-number {
			// Using rems to base this on the theme styles.
			font-size: 0.875rem;
			line-height: 1.5rem;
			margin-bottom: 0;
			color: $alert-red;
		}

		.line {
			border: 0.5px solid $studio-gray-5;
		}

		.phone-input {
			font-size: 1rem;
			background-color: #fff;
			box-shadow: none;
			border: 1px solid $gray-300;
			border-radius: 5px;
			margin-left: 0.1rem;
			width: calc( 100% - 0.25rem );

			&::placeholder {
				font-weight: 400;
				color: #a7aaad;
			}

			&.has-error {
				outline-color: $alert-red;
			}
		}
	}

	.iti {
		margin-top: 16px;
	}
}

.wc-block-components-form
	.woopay-save-new-user-container
	.wc-block-components-text-input:only-child {
	margin-top: 0;
}

#phone-number {
	height: 42px;
	box-shadow: inset 0 1px #d6d6d6;
	border: none;
	font-size: 15px;
	line-height: 26px;
}

#payment {
	.save-details-form.place-order {
		margin-top: $gap-smaller;
	}
}

// compulsary overrides required for intl-tel-input
.iti__flag {
	background-image: url( '/node_modules/intl-tel-input/build/img/flags.png' );
}

@media ( -webkit-min-device-pixel-ratio: 2 ), ( min-resolution: 192dpi ) {
	.iti__flag {
		background-image: url( '/node_modules/intl-tel-input/build/img/flags@2x.png' );
	}
}

// override intl-tel-input styles
.iti {
	width: 100%;
	margin-top: $gap-large;

	&--container {
		margin-top: 0;
	}
}

.no-top-margin .iti {
	margin-top: 0;
}

.iti__selected-flag {
	background-color: inherit !important;
	padding: 0 6px 0 12px;

	.iti__flag {
		transform: scale( 1.1 );
	}

	.iti__selected-dial-code {
		font-size: 16px;
		color: $gray-800;
	}

	.iti__arrow {
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #2c3338;

		&--up {
			border-top: none;
			border-bottom: 5px solid #2c3338;
		}
	}
}

.wp-admin {
	.iti {
		.iti__arrow {
			border: 0;
			width: 10px;
			height: 18px;
			background: url( 'data:image/svg+xml;utf8,<svg viewBox="4 0 24 24" xmlns="http://www.w3.org/2000/svg" width="18" height="18" aria-hidden="true" focusable="false"><path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"></path></svg>' );

			&--up {
				transform: scaleY( -1 );
			}
		}

		.iti__country-list {
			border: 1px solid $gray-600;
			border-radius: 2px;
			box-shadow: none;
		}

		.iti__selected-dial-code,
		.phone-input.input-text,
		.iti__country {
			font-size: inherit;
			color: $gray-80;

			@media ( max-width: $break-medium ) {
				font-size: 16px;
			}
		}
	}

	&.iti-mobile .iti--container {
		top: 76px;
		width: auto;
	}
}
