/**
 * The Events Calendar Tribe List View V2 Stylesheet
 *
 * @package TribeEventsCalendar
 *
 */
.tribe-events {

	.tribe-events-calendar-list__separator-month {
		display: flex;
		align-items: center;

		&:after {
			background-color: var(--color-border-default);
			content: '';
			display: block;
			flex: auto;
			height: 1px;
			margin-left: 20px;
		}
	}

	.tribe-events-calendar-list__separator-month-text {
		flex: none;
	}

	.tribe-events-calendar-list__event {
		display: flex;
		flex-direction: column;
		margin-bottom: var(--spacer-4);
		margin-top: var(--spacer-7);

		@media (--viewport-medium) {
			flex-direction: row-reverse;
			justify-content: flex-end;
			margin-bottom: var(--spacer-6);
			margin-top: var(--spacer-9);
		}

		&:last-child {
			margin-bottom: var(--spacer-7);

			@media (--viewport-medium) {
				margin-bottom: var(--spacer-9);
			}
		}
	}

	.tribe-events-calendar-list__separator-month + .tribe-events-calendar-list__event {
		margin-top: var(--spacer-4);

		@media (--viewport-medium) {
			margin-top: var(--spacer-6);
		}
	}

	.tribe-events-calendar-list__event-featured-image-wrapper {
		flex: none;
		margin-bottom: var(--spacer-4);

		@media (--viewport-medium) {
			margin-bottom: 0;
			width: calc(3 * var(--grid-width-1-of-9));
		}
	}

	.tribe-events-calendar-list__event-featured-image {
		padding-bottom: 66.67%;
	}

	.tribe-events-calendar-list__event-details {
		flex: none;

		@media (--viewport-medium) {
			margin-left: var(--grid-width-1-of-9);
			width: calc(5 * var(--grid-width-1-of-9));
		}
	}

	.tribe-events-calendar-list__event-datetime-wrapper {
		align-items: center;
		display: flex;
		margin-bottom: var(--spacer-1);
		position: relative;

		@media (--viewport-medium) {
			margin-bottom: var(--spacer-2);
		}
	}

	.tribe-events-calendar-list__event-datetime-featured-icon {
		margin-left: 10px;
	}

	.tribe-events-calendar-list__event-title {
		margin-bottom: var(--spacer-1);

		@media (--viewport-medium) {
			margin-bottom: var(--spacer-2);
		}
	}

	.tribe-events-calendar-list__event-title-link {
		border-bottom: 2px solid transparent;
		transition: var(--transition-border-color);

		&:focus,
		&:hover {
			border-bottom: 2px solid var(--color-text-primary);
		}
	}

	.tribe-events-calendar-list__event-venue {
		margin-bottom: var(--spacer-1);

		@media (--viewport-medium) {
			margin-bottom: var(--spacer-2);
		}
	}
}