/*
 * The month grid.
 *
 * Layout only: columns, rules between cells, bar lanes, and the popover's
 * height. Colours come from currentColor so the calendar takes on whatever the
 * theme already looks like, and nothing here sets a font, a background or a
 * decorative rule. If a declaration could be removed and the grid still read as
 * a calendar, it does not belong in this file.
 */

.calvin-calendar__grid {
	--calvin-rule: color-mix(in srgb, currentColor 20%, transparent);

	border-top: 1px solid var(--calvin-rule);
	border-left: 1px solid var(--calvin-rule);
}

.calvin-calendar__weekdays,
.calvin-calendar__week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calvin-calendar__weekday {
	border-right: 1px solid var(--calvin-rule);
	border-bottom: 1px solid var(--calvin-rule);
	padding: 0.25rem 0.5rem;
}

.calvin-calendar__cell {
	border-right: 1px solid var(--calvin-rule);
	border-bottom: 1px solid var(--calvin-rule);
	min-height: 5rem;
	padding: 0.25rem 0.5rem;
}

/* Bars sit above the day cells; each lane is a row of its own. */
.calvin-calendar__span {
	grid-row: 2;
	margin: 0 0 1px;
	overflow: hidden;
	padding: 0 0.5rem;
	text-overflow: ellipsis;
	white-space: nowrap;
	border: 1px solid var(--calvin-rule);
}

.calvin-calendar__span.is-continued {
	border-left-style: dashed;
}

.calvin-calendar__day--outside {
	opacity: 0.55;
}

.calvin-calendar__events {
	list-style: none;
	margin: 0;
	padding: 0;
}

.calvin-calendar__event {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.calvin-calendar__popover {
	border: 1px solid var(--calvin-rule);
	max-height: 60vh;
	max-width: 20rem;
	overflow-y: auto;
	padding: 0.75rem 1rem;
}

.calvin-calendar__nav {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
}

.calvin-calendar__nav .is-disabled {
	opacity: 0.4;
}

/*
 * Where the popover API is unsupported the panel is an ordinary element, so it
 * is kept out of the flow until the browser can manage it.
 */
@supports not selector(:popover-open) {
	.calvin-calendar__popover {
		display: none;
	}
}

@media (max-width: 40rem) {
	.calvin-calendar__cell {
		min-height: 3.5rem;
	}
}