.tribe-events {
	/* -----------------------------------------------------------------------------
	 *
	 * Navigation
	 *
	 * Example:
	 * <nav class="tribe-events-c-nav">
	 *   <ul class="tribe-events-c-nav__list">
	 *     <li class="tribe-events-c-nav__list-item">
	 *       <a href="#" class="tribe-events-c-nav__prev">
	 *         Previous
	 *       </a>
	 *       <a href="#" class="tribe-events-c-nav__next">
	 *         Next
	 *       </a>
	 *     </li>
	 *   </ul>
	 * </nav>
	 *
	 * ----------------------------------------------------------------------------- */

	.tribe-events-c-nav {
		border-top: 1px solid var(--color-border-default);
	}

	.tribe-events-c-nav__list {
		list-style: none;
	}

	.tribe-events-c-nav__prev-label-plural,
	.tribe-events-c-nav__next-label-plural {
		white-space: pre;
	}

	.tribe-events-c-nav__today {

		&:hover,
		&:focus {
			color: var(--color-accent-secondary-hover);
		}

		&:active {
			color: var(--color-text-primary);
		}
	}

	.tribe-events-c-nav__prev,
	.tribe-events-c-nav__next {

		.tribe-common--breakpoint-medium& {
			color: var(--color-text-secondary);
		}

		&:hover,
		&:focus {
			color: var(--color-accent-secondary-hover);
		}

		&:active {
			color: var(--color-text-primary);
		}

		&:disabled {
			background-color: transparent;
			color: var(--color-text-disabled);
		}
	}

	.tribe-events-c-nav__prev {

		&:before {
			background-image: svg-inline(caret-left-active);
			background-repeat: no-repeat;
			background-size: contain;
			content: '';
			height: 12px;
			margin-right: 8px;
			width: 7px;

			.tribe-common--breakpoint-medium& {
				background-image: svg-inline(caret-left);
				height: 14px;
				margin-right: 15px;
				width: 9px;
			}
		}

		&:hover,
		&:focus {

			&:before {
				background-image: svg-inline(caret-left-active);
				opacity: var(--opacity-icon-hover);
			}
		}

		&:active {

			&:before {
				opacity: var(--opacity-default);
			}
		}

		&:disabled {

			&:before {
				background-image: svg-inline(caret-left-disabled);
			}
		}
	}

	.tribe-events-c-nav__next {

		&:after {
			background-image: svg-inline(caret-right-active);
			background-repeat: no-repeat;
			background-size: contain;
			content: '';
			height: 12px;
			margin-left: 8px;
			width: 7px;

			.tribe-common--breakpoint-medium& {
				background-image: svg-inline(caret-right);
				height: 14px;
				margin-left: 15px;
				width: 9px;
			}
		}

		&:hover,
		&:focus {

			&:after {
				background-image: svg-inline(caret-right-active);
				opacity: var(--opacity-icon-hover);
			}
		}

		&:active {

			&:after {
				opacity: var(--opacity-default);
			}
		}

		&:disabled {

			&:after {
				background-image: svg-inline(caret-right-disabled);
			}
		}
	}
}