.tribe-common {
	/* -----------------------------------------------------------------------------
	 *
	 * Form Control: Tabs
	 *
	 * Example:
	 * <div class="tribe-common-form-control-tabs">
	 *   <button
	 *     class="tribe-common-form-control-tabs__button"
	 *     aria-haspopup="listbox"
	 *     aria-labelledby="tabButton"
	 *     id="tabButton"
	 *   >
	 *     Tab One
	 *   </button>
	 *   <ul class="tribe-common-form-control-tabs__list" tabindex="-1" role="listbox">
	 *     <li class="tribe-common-form-control-tabs__list-item" role="presentation">
	 *       <input
	 *         class="tribe-common-form-control-tabs__input"
	 *         id="tabOne"
	 *         name="tabGroup"
	 *         type="radio"
	 *         value="tabOne"
	 *         checked="checked"
	 *       />
	 *       <label
	 *         class="tribe-common-form-control-tabs__label"
	 *         id="tabOneLabel"
	 *         for="tabOne"
	 *         role="option"
	 *       >
	 *         Tab One
	 *       </label>
	 *     </li>
	 *     <li class="tribe-common-form-control-tabs__list-item" role="presentation">
	 *       <input
	 *         class="tribe-common-form-control-tabs__input"
	 *         id="tabTwo"
	 *         name="tabGroup"
	 *         type="radio"
	 *         value="tabTwo"
	 *       />
	 *       <label
	 *         class="tribe-common-form-control-tabs__label"
	 *         id="tabTwoLabel"
	 *         for="tabTwo"
	 *         role="option"
	 *       >
	 *         Tab Two
	 *       </label>
	 *     </li>
	 *   </ul>
	 * </div>
	 *
	 * ----------------------------------------------------------------------------- */

	/**
	 * @todo: implement listbox JS
	 * https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
	 */

	.tribe-common-form-control-tabs {
		position: relative;

		@media (--viewport-medium) {
			display: flex;
		}
	}

	.tribe-common-form-control-tabs__button {
		@mixin form-control-select-button-mobile;

		@media (--viewport-medium) {
			@mixin hidden;
		}

		&:after {
			@mixin form-control-select-button-icon-mobile;
		}
	}

	.tribe-common-form-control-tabs__list {
		/**
		 * @todo: remove once listbox JS is implemented
		 */
		/* @mixin hidden; */

		@mixin form-control-select-list-mobile;

		@media (--viewport-medium) {
			border: 1px solid var(--color-border-default);
			box-shadow: none;
			display: flex !important;
			flex: none;
			position: static;
			visibility: visible;
			width: auto;
			outline: none;
		}
	}

	.tribe-common-form-control-tabs__list-item {

		&:first-child .tribe-common-form-control-tabs__label {
			@mixin form-control-select-list-item-first;

			@media (--viewport-medium) {
				margin-top: -6px;
				padding-top: 17px;
			}
		}

		&:last-child .tribe-common-form-control-tabs__label {
			@mixin form-control-select-list-item-last;

			@media (--viewport-medium) {
				margin-bottom: -6px;
				padding-bottom: 17px;
			}
		}

		@media (--viewport-medium) {
			border-right: 1px solid var(--color-border-default);
			flex: none;
			margin: 6px 0;
			width: 88px;

			&:last-child {
				border: none;
				width: 87px;
			}
		}
	}

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

		&:checked + .tribe-common-form-control-tabs__label {
			@mixin form-control-select-list-item-selected;
		}
	}

	.tribe-common-form-control-tabs__label {
		@mixin form-control-select-list-item;

		@media (--viewport-medium) {
			margin: -6px 0;
			padding: 17px 5px;
			text-align: center;
			display: block;
		}
	}

	body#top & { /* Enfold Compatibility */

		.tribe-common-form-control-tabs__list-item {

			&:first-child .tribe-common-form-control-tabs__label {
				padding-top: 16px;

				@media (--viewport-medium) {
					margin-top: -6px;
					padding-top: 17px;
				}
			}

			&:last-child .tribe-common-form-control-tabs__label {
				padding-bottom: 16px;

				@media (--viewport-medium) {
					margin-bottom: -6px;
					padding-bottom: 17px;
				}
			}
		}

		.tribe-common-form-control-tabs__input {

			&:checked + .tribe-common-form-control-tabs__label {
				color: var(--color-text-primary);
				font-weight: var(--font-weight-bold);
			}
		}

		.tribe-common-form-control-tabs__label {
			@mixin desktop-body-2;

			@media (--viewport-medium) {
				margin: -6px 0;
				padding: 17px 5px;
				text-align: center;
				display: block;
			}
		}
	}
}