.tribe-common {
	/* -----------------------------------------------------------------------------
	 *
	 * Form Control: Selects
	 *
	 * Example:
	 * <div class="tribe-common-form-control-select">
	 *   <button
	 *     class="tribe-common-form-control-select__button"
	 *     aria-haspopup="listbox"
	 *     aria-labelledby="selectButton"
	 *     id="selectButton"
	 *   >
	 *     Option One
	 *   </button>
	 *   <ul class="tribe-common-form-control-select__list" tabindex="-1" role="listbox">
	 *     <li
	 *       class="tribe-common-form-control-select__list-item"
	 *       id="optionOne"
	 *       role="option"
	 *     >
	 *       Option One
	 *     </li>
	 *     <li
	 *       class="tribe-common-form-control-select__list-item"
	 *       id="optionTwo"
	 *       role="option"
	 *     >
	 *       Option Two
	 *     </li>
	 *   </ul>
	 * </div>
	 *
	 * ----------------------------------------------------------------------------- */

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

	.tribe-common-form-control-select {
		position: relative;
	}

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

		@media (--viewport-medium) {
			@mixin form-control-select-button-desktop;
		}

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

			@media (--viewport-medium) {
				@mixin form-control-select-button-icon-desktop;
			}
		}
	}

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

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

		@media (--viewport-medium) {
			@mixin form-control-select-list-desktop;
		}
	}

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

		&:first-child {
			@mixin form-control-select-list-item-first;
		}

		&:last-child {
			@mixin form-control-select-list-item-last;
		}

		&[aria-selected="true"] {
			@mixin form-control-select-list-item-selected;
		}
	}
}