@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
// grunion-field-wrap is a backwards compat class,
//need to remove this generic classes
// *-wrap classes are helpers added by backend
.wp-block-jetpack-field-telephone.wp-block-jetpack-input-wrap.grunion-field-wrap,
.wp-block-jetpack-field-phone.wp-block-jetpack-input-wrap.grunion-field-wrap {

	.jetpack-field__input-phone-wrapper {
		display: flex;
		gap: 8px;
		background-color: var(--jetpack--contact-form--input-background);
		color: var(--jetpack--contact-form--text-color, fieldText);
		border-color: var(--jetpack--contact-form--border-color, currentColor);
		border-width: var(--jetpack--contact-form--border-size);
		border-style: var(--jetpack--contact-form--border-style);
		border-radius: var(--jetpack--contact-form--border-radius);
		font-family: var(--jetpack--contact-form--font-family);
		font-size: var(--jetpack--contact-form--font-size);
		padding: var(--jetpack--contact-form--input-padding);
		line-height: var(--jetpack--contact-form--line-height);
		align-items: center;
		backdrop-filter: var(--jetpack--contact-form--input-backdrop-filter, none);
		filter: var(--jetpack--contact-form--input-filter, none);

		&:has(.jetpack-field__input-element:focus) {
			outline-width: 1px;
			outline-style: solid;
		}

		.jetpack-field__input-prefix:not([hidden]) {
			background-color: transparent;
			z-index: 1;

			.jetpack-field__input-element {
				width: 100%;
				text-overflow: ellipsis;
				white-space: nowrap;

				@media (max-width: #{ (gb.$break-mobile) }) {

					max-width: calc(gb.$break-mobile / 3);
				}
			}
		}

		.jetpack-field__input-element {
			border: 0;
			font: inherit;
			flex: 1;
			outline: none;
			color: inherit;
			background: none;
			width: inherit;
			box-sizing: border-box;
			resize: none;
			padding: 0;
			min-width: unset;
			min-height: unset;
			backdrop-filter: none;
			z-index: 1;

			&:not(.jetpack-field__input-prefix .jetpack-field__input-element) {
				letter-spacing: inherit;
			}
		}

		.jetpack-field__input-element::before,
		.jetpack-field__input-element::after {
			box-sizing: inherit;
		}

		.jetpack-field__input-element:focus {
			box-shadow: none;
		}
	}

	.is-style-animated & {

		.jetpack-field__input-phone-wrapper {

			&:has(.jetpack-field__input-element:focus) {
				outline: unset;
			}

			&:not(:has(*:focus, *:active)):not(.is-combobox-open) {

				.jetpack-field__input-prefix:not(:has(~ .has-placeholder),:has(~ .has-value)) {
					pointer-events: none;
					visibility: hidden;
				}
			}
		}

		.animated-label__label {

			&:has(~.jetpack-field__input-phone-wrapper.is-combobox-open),
			&:has(~.jetpack-field__input-phone-wrapper:focus-within),
			&:has(~* .jetpack-field__input-element:focus),
			&:has(~* .jetpack-field__input-element.has-value),
			&:has(~* .jetpack-field__input-element.has-placeholder) {
				transform: translateY(0);
				top: calc(2px + var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size, 1px)));

				.grunion-label-text {
					font-size: 0.75em;
				}

				.grunion-label-required {
					font-size: 0.6375em;
				}
			}
		}

	}

	.is-style-outlined & {

		.jetpack-field__input-phone-wrapper {
			z-index: unset;
			border-color: transparent !important;

			&:has(.jetpack-field__input-element:focus) {
				outline: unset;
			}

			&:not(:has(*:focus, *:active)):not(.is-combobox-open) {

				// notched label is game of superpositions with z-index,
				// while no input element is selected, force transparent so label is visible
				.jetpack-field__input-element {
					background-color: transparent !important;
				}

				.jetpack-field__input-prefix:not(:has(~ .has-placeholder),:has(~ .has-value)) {
					pointer-events: none;
					visibility: hidden;
				}
			}
		}

		.notched-label {

			&:has(~.jetpack-field__input-phone-wrapper.is-combobox-open) .notched-label__label,
			&:has(~.jetpack-field__input-phone-wrapper:focus-within) .notched-label__label,
			&:has(~* .jetpack-field__input-element:focus) .notched-label__label,
			&:has(~* .jetpack-field__input-element.has-value) .notched-label__label,
			&:has(~* .jetpack-field__input-element.has-placeholder) .notched-label__label {
				top: calc(var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size)) * -1);

				.grunion-label-text {
					font-size: 0.8em;
				}
			}

			&:has(~.jetpack-field__input-phone-wrapper.is-combobox-open) .notched-label__notch,
			&:has(~.jetpack-field__input-phone-wrapper:focus-within) .notched-label__notch,
			&:has(~* .jetpack-field__input-element:focus) .notched-label__notch,
			&:has(~* .jetpack-field__input-element.has-value) .notched-label__notch,
			&:has(~* .jetpack-field__input-element.has-placeholder) .notched-label__notch {
				border-top-color: transparent !important;
			}
		}

	}
}