/* Custom styles for https://fullcalendar.io/ */

.fc {
	--fc-border-color: transparent;
	--fc-today-bg-color: var(--bg-color-dark);
	--fc-button-text-color: var(--text-color);
	--fc-button-bg-color: white;
	--fc-button-border-color: var(--color-neutral-200);
	--fc-button-hover-bg-color: var(--text-color);
	--fc-button-hover-text-color: white;
	--fc-button-active-bg-color: var(--text-color);
	--fc-button-active-text-color: white;
}

.fc-button {
	border-radius: var(--rounded-lg) !important;
}

.fc-direction-ltr .fc-button-group > .fc-button:not(:last-child) {
	border-bottom-right-radius: 0px !important;
	border-top-right-radius: 0px !important;
}

.fc-direction-ltr .fc-button-group > .fc-button:not(:first-child) {
	border-bottom-left-radius: 0px !important;
	border-top-left-radius: 0px !important
}

.fc-button-active {
	color: var(--fc-button-active-text-color) !important;
}

.fc-button-primary:disabled {
	opacity: 1 !important;
}

.fc-icon {
	position: relative;
	top: -3px;
}

.fc-header-toolbar {
	@media (width < 40rem) {
		background-color: white;
		padding: calc(4 * var(--spacing));
		padding-top: 0;
		border-bottom: 1px solid var(--color-neutral-200);
		margin-bottom: 0 !important;
	}
}

.fc-view-harness {
	@media (width < 40rem) {
		height: 50vh !important; /* TODO: this is not great CSS */
		margin: calc(4 * var(--spacing));
	}
}

.fc-toolbar-title {
	@media (width < 40rem) {
		font-size: var(--text-xl) !important;
	}
}

.fc-daygrid-day-number {
	margin: 0 auto;
}

.fc-day-today {
	border-radius: var(--rounded-md);
}