.tribe-common {
	/* -----------------------------------------------------------------------------
	 *
	 * Form Control: Toggles
	 *
	 * Example (Horizontal):
	 * <div class="tribe-common-form-control-toggle">
	 *   <input
	 *     class="tribe-common-form-control-toggle__input"
	 *     id="toggleOne"
	 *     name="toggleGroup"
	 *     type="checkbox"
	 *     value="toggleOne"
	 *   />
	 *   <label class="tribe-common-form-control-toggle__label" for="toggleOne">Toggle One</label>
	 * </div>
	 *
	 * Example (Vertical):
	 * <div class="tribe-common-form-control-toggle tribe-common-form-control-toggle--vertical">
	 *   <label class="tribe-common-form-control-toggle__label" for="toggleOne">Toggle One</label>
	 *   <input
	 *     class="tribe-common-form-control-toggle__input"
	 *     id="toggleOne"
	 *     name="toggleGroup"
	 *     type="checkbox"
	 *     value="toggleOne"
	 *   />
	 * </div>
	 *
	 * ----------------------------------------------------------------------------- */

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

	.tribe-common-form-control-toggle__input {
		@mixin form-control-slider-toggle-track;

		appearance: none;
		background-color: var(--form-color-border-secondary);
		cursor: pointer;
		display: inline-block;
		vertical-align: middle;
		width: 40px;

		&:after {
			@mixin form-control-slider-toggle-thumb;

			content: '';
			left: 0;
			position: absolute;
			top: -5px;
			transition: var(--transition-transform);
		}

		&:checked {
			background-color: var(--form-color-accent-primary);

			&:after {
				transform: translateX(20px);
			}
		}
	}

	.tribe-common-form-control-toggle__label {
		@mixin desktop-body-3;

		color: var(--color-text-secondary);
		cursor: pointer;
		display: inline-block;
		margin-left: 11px;
		vertical-align: middle;
	}

	.tribe-common-form-control-toggle--vertical {

		.tribe-common-form-control-toggle__label {
			display: block;
			margin: 0 0 6px;
		}
	}

	body#top & { /* Enfold Compatibility */

		.tribe-common-form-control-toggle__input {
			display: inline-block;
		}

		.tribe-common-form-control-toggle__label {
			color: var(--color-text-secondary);
			font-weight: var(--font-weight-regular);
		}
	}
}