.tribe-common {
	/* -----------------------------------------------------------------------------
	 *
	 * Form Control: Text
	 *
	 * Example:
	 * <div class="tribe-common-form-control-text">
	 *   <label class="tribe-common-form-control-text__label" for="textInput">Text Input</label>
	 *   <input
	 *     class="tribe-common-form-control-text__input"
	 *     id="textInput"
	 *     name="textInput"
	 *     type="text"
	 *     placeholder="Text Input"
	 *   />
	 * </div>
	 *
	 * ----------------------------------------------------------------------------- */

	/* .tribe-common-form-control-text {} */

	.tribe-common-form-control-text__label {
		@mixin visually-hide;
	}

	.tribe-common-form-control-text__input {
		@mixin desktop-body-1;

		border: none;
		border-bottom: 1px solid var(--color-border-default);
		padding: var(--spacer-2) var(--spacer-6) var(--spacer-2) 0;
		width: 100%;

		@media (--viewport-medium) {
			@mixin desktop-body-2;

			border: none;
			padding: var(--spacer-4) var(--spacer-4) var(--spacer-4) var(--spacer-8);
		}

		&::placeholder {
			color: var(--color-text-secondary);
			font-style: normal;
		}

		&:focus {
			border-bottom-color: var(--color-border-active);
			outline: none;
		}
	}

	body#top & { /* Enfold Compatibility */

		.tribe-common-form-control-text__input {
			@mixin desktop-body-1;

			border-bottom: 1px solid var(--color-border-default);
			padding: var(--spacer-2) var(--spacer-4) var(--spacer-2) 0;
			width: 100%;

			@media (--viewport-medium) {
				@mixin desktop-body-2;

				padding: var(--spacer-2) 18px;
			}

			&::placeholder {
				color: var(--color-text-secondary);
			}
		}
	}
}