.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__input {
		@mixin desktop-body-1;

		border: 0;
		border-bottom: 1px solid var(--color-border-default);

		.tribe-common--breakpoint-medium& {
			@mixin desktop-body-2;

			border: 0;
		}

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

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

	/* -----------------------------------------------------------------------------
	 *
	 * Form Control: Text Theme Overrides
	 *
	 * ----------------------------------------------------------------------------- */

	/* -------------------------------------------------------------------------
	 * Theme Overrides - Twenty Seventeen
	 * ------------------------------------------------------------------------- */

	.tribe-theme-twentyseventeen & {

		.tribe-common-form-control-text__input {
			color: var(--color-text-primary);
		}
	}

	/* -------------------------------------------------------------------------
	 * Theme Overrides - Twenty Twenty
	 * ------------------------------------------------------------------------- */

	.tribe-theme-twentytwenty & {

		.tribe-common-form-control-text__input {
			line-height: inherit;
		}
	}

	/* -------------------------------------------------------------------------
	 * Theme Overrides - Enfold
	 * ------------------------------------------------------------------------- */

	#top.tribe-theme-enfold &,
	#top .main_color & {

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

			background: var(--color-background);
			border: 0;
			border-bottom: 1px solid var(--color-border-default);

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

		&.tribe-common--breakpoint-medium .tribe-common-form-control-text__input {
			@mixin desktop-body-2;

			border: 0;
		}
	}
}