@gravityforms/components/css/admin/phone.css

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

.gform-admin {

	.gform-phone {
		font-family: var(--gform-admin-font-family-base);
		max-inline-size: 100%;
		position: relative;

		&,
		* {
			box-sizing: border-box;
		}
	}

	.gform-phone--placeholder {
		opacity: 0.5;
	}

	.gform-phone__fallback {
		position: relative;

		.gform-loader {
			inset-block-start: calc(50% - 20px);
			inset-inline-start: calc(50% - 20px);
			position: absolute;
			z-index: 3;
		}
	}

	.gform-phone__label {
		cursor: pointer;
		margin-block-end: 0.375rem;
	}

	.gform-phone__required {
		display: inline-block;
		margin-inline-start: 0.375rem;
	}

	.gform-phone--disabled .gform-phone__label {
		cursor: default;
	}

	.gform-phone__wrapper {
		display: flex;
		flex-wrap: nowrap;
	}

	.gform-phone__dropdown {
		position: static;

		.gform-dropdown__popover-wrapper { /* extra specificity to override the default styles */
			inline-size: 100%;
			inset-block-start: calc(100% + 0.5rem);
			position: absolute;
		}

		.gform-phone__dropdown-trigger { /* extra specificity to override the default styles */
			border-bottom-right-radius: 0;
			border-top-right-radius: 0;
			inline-size: 4.125rem;

			.gform-dropdown__trigger-label,
			.gform-dropdown__trigger-after-label {
				display: none;
			}

			&:focus {
				z-index: 2;
			}
		}

		.gform-dropdown__list-item-after-label {
			block-size: auto;
			font-size: inherit;
			inline-size: auto;
		}
	}

	.gform-phone__input-wrapper {
		display: flex;
		flex: 1;
		margin-inline-start: -1px;
		z-index: 1;
	}

	.gform-phone__input {
		border-bottom-left-radius: 0;
		border-top-left-radius: 0;
		flex: 1;
	}

	.gform-phone__flag-icon {
		align-items: center;
		block-size: 1.25rem;
		display: flex;
		font-size: 1.25rem;
		inline-size: 1.25rem;
		justify-content: center;
		overflow: hidden;
	}

	.gform-phone__help-text {
		color: var(--gform-admin-color-red);
		margin-block-start: 0.375rem;
	}
}