.tribe-events {

	/* -----------------------------------------------------------------------------
	 * Day
	 * ----------------------------------------------------------------------------- */

	.tribe-events-calendar-month__day {
		border-radius: 4px;
		height: 48px;
		overflow: hidden;
		position: relative;
		width: var(--grid-width-1-of-7);

		@media (--viewport-medium) {
			border-color: var(--color-border-default);
			border-radius: 0;
			border-style: solid;
			border-width: 0 1px 1px 0;
			height: auto;
			min-height: 168px;
			overflow: visible;
		}

		&:after {
			@media (--viewport-medium) {
				background-color: transparent;
				bottom: 0;
				content: '';
				display: block;
				height: 2px;
				left: -1px;
				position: absolute;
				transition: var(--transition-background-color);
				width: calc(100% + 2px);
			}
		}

		&:hover {

			&:after {
				@media (--viewport-medium) {
					background-color: var(--color-border-active);
				}
			}
		}
	}

	.tribe-events-calendar-month__day--current {

		.tribe-events-calendar-month__day-date-link {
			color: var(--color-accent-primary);
			font-weight: var(--font-weight-bold);

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

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

	.tribe-events-calendar-month__day--disabled {

		.tribe-events-calendar-month__day-date-link {
			color: var(--color-text-disabled);

			/* @todo: figure out hover focus active states for disabled day */
			&:hover,
			&:focus {
				color: var(--color-text-disabled);
			}

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

	.tribe-events-calendar-month__day-cell {
		height: 100%;
		width: 100%;
	}

	.tribe-events-calendar-month__day-cell--mobile {
		align-items: center;
		border-bottom: 2px solid transparent;
		display: flex;
		flex-direction: column;
		text-align: center;
		transition: var(--transition-border-color);

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

		&:hover,
		&:focus {
			border-bottom-color: var(--color-accent-primary);
		}
	}

	.tribe-events-calendar-month__day-cell--desktop {
		@media (--viewport-medium) {
			display: flex !important;
			flex-direction: column;
			visibility: visible;
		}
	}

	.tribe-events-calendar-month__day-cell--selected {
		background-color: var(--color-accent-primary);

		.tribe-events-calendar-month__day-date {
			color: var(--color-background);
		}

		.tribe-events-calendar-month__mobile-events-icon--event {
			background-color: var(--color-background);
		}

		.tribe-events-calendar-month__mobile-events-icon--featured {
			background-image: svg-inline(featured-white);
		}
	}

	.tribe-events-calendar-month__day-date {
		@media (--viewport-medium) {
			flex: none;
			padding: var(--spacer-1) var(--spacer-3);
		}
	}

	.tribe-events-calendar-month__day-date-link {
		color: var(--color-accent-secondary);

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

		&:active {
			color: var(--color-accent-secondary-active);
		}
	}

	.tribe-events-calendar-month__mobile-events-icon--event {
		background-color: var(--color-accent-primary);
		border-radius: 50%;
		height: 8px;
		width: 8px;
	}

	.tribe-events-calendar-month__mobile-events-icon--featured {
		background-image: svg-inline(featured);
		background-repeat: no-repeat;
		background-size: contain;
		height: 10px;
		width: 8px;
	}

	.tribe-events-calendar-month__events {
		flex: auto;
	}
}