.tribe-events {
	/* -----------------------------------------------------------------------------
	 *
	 * View Selector
	 *
	 * Example (Select):
	 * <div class="tribe-events-c-view-selector">
	 *   <button
	 *     class="tribe-events-c-view-selector__button"
	 *     aria-controls="container-id"
	 *     aria-expanded="false"
	 *     aria-selected="false"
	 *   >
	 *     <span class="tribe-events-c-view-selector__button-icon tribe-common-svgicon tribe-common-svgicon--month"></span>
	 *     <span class="tribe-events-c-view-selector__button-text">
	 *       Month
	 *     </span>
	 *   </button>
	 *   <div
	 *     class="tribe-events-c-view-selector__content"
	 *     id="container-id"
	 *     aria-hidden="true"
	 *   >
	 *     <ul class="tribe-events-c-view-selector__list">
	 *       <li class="tribe-events-c-view-selector__list-item">
	 *         <a href="#" class="tribe-events-c-view-selector__list-item-link" data-js="tribe-events-view-link">
	 *           <span class="tribe-events-c-view-selector__list-item-icon tribe-common-svgicon tribe-common-svgicon--month"></span>
	 *           <span class="tribe-events-c-view-selector__list-item-text">
	 *             Month
	 *           </span>
	 *         </a>
	 *       </li>
	 *       <li class="tribe-events-c-view-selector__list-item">
	 *         <a href="#" class="tribe-events-c-view-selector__list-item-link" data-js="tribe-events-view-link">
	 *           <span class="tribe-events-c-view-selector__list-item-icon tribe-common-svgicon tribe-common-svgicon--list"></span>
	 *           <span class="tribe-events-c-view-selector__list-item-text">
	 *             List
	 *           </span>
	 *         </a>
	 *       </li>
	 *     </ul>
	 *   </div>
	 * </div>
	 *
	 * Example (Tabs):
	 * <div class="tribe-events-c-view-selector tribe-events-c-view-selector--tabs">
	 *   ... (same as above)
	 * </div>
	 *
	 * ----------------------------------------------------------------------------- */

	.tribe-events-c-view-selector--labels {

		.tribe-events-c-view-selector__button {

			&:before {

				.tribe-common--breakpoint-medium& {
					content: none;
				}
			}

			&:after {

				.tribe-common--breakpoint-medium& {
					background-image: svg-inline(caret-down);
					background-repeat: no-repeat;
					background-size: contain;
					content: '';
					display: block;
					flex: none;
					height: 6px;
					margin-left: var(--spacer-1);
					width: 10px;
				}
			}
		}

		.tribe-events-c-view-selector__button--active {

			&:after {

				.tribe-common--breakpoint-medium& {
					background-image: svg-inline(caret-up);
				}
			}
		}

		.tribe-events-c-view-selector__button-text {

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

		.tribe-events-c-view-selector__content {

			.tribe-common--breakpoint-medium& {
				box-shadow: var(--box-shadow-default);
			}
		}
	}

	.tribe-events-c-view-selector--tabs {

		.tribe-events-c-view-selector__content {

			.tribe-common--breakpoint-medium& {
				border: 0;
				border-radius: 0;
				box-shadow: none;
			}
		}

		.tribe-events-c-view-selector__list-item--active {

			.tribe-events-c-view-selector__list-item-link {

				.tribe-common--breakpoint-medium& {
					background-color: transparent;
				}

				&:after {

					.tribe-common--breakpoint-medium& {
						background-color: var(--color-accent-secondary);
						bottom: -1px;
						content: '';
						display: block;
						height: 2px;
						position: absolute;
						width: 100%;
					}
				}
			}
		}
	}

	.tribe-events-c-view-selector__button {
		text-align: left;

		&:hover,
		&:focus {
			opacity: var(--opacity-icon-hover);
		}

		&:active {
			opacity: var(--opacity-icon-active);
		}

		&:before {
			background-color: var(--color-accent-primary);
			content: '';
			display: none;
			height: 2px;
			pointer-events: none;
			position: absolute;
			top: 100%;
			transform: translateY(var(--spacer-0));
			width: calc(100% - (2 * var(--spacer-0)));

			.tribe-common--breakpoint-medium& {
				width: calc(100% - (2 * var(--spacer-1)));
				transform: none;
			}
		}
	}

	.tribe-events-c-view-selector__button--active {

		&:before {
			display: block;
		}
	}

	.tribe-events-c-view-selector__content {
		border: 1px solid var(--color-border-secondary);
		border-radius: var(--border-radius-default);
		box-shadow: var(--box-shadow-tooltip);
	}

	.tribe-events-c-view-selector__list-item--active {

		.tribe-events-c-view-selector__list-item-link {
			background-color: var(--color-background-secondary);
		}

		.tribe-events-c-view-selector__list-item-text {
			font-weight: var(--font-weight-bold);
		}
	}

	.tribe-events-c-view-selector__list-item-link {
		border-radius: var(--border-radius-default);

		&:hover,
		&:focus {

			.tribe-events-c-view-selector__list-item-icon {
				opacity: var(--opacity-icon-hover);
			}

			.tribe-events-c-view-selector__list-item-text {
				color: var(--color-accent-secondary-hover);
			}
		}
	}

	.tribe-events-c-view-selector__list-item-text {
		@mixin desktop-body-2;
	}
}