@import './shared.css';

:host {
	--day-border:        #333;
	--day-name-colour:   #555;
	--day-number-size:   2.5em;
	--day-label-size:    1.1em;
	display: block;
	font-family: sans-serif;
	max-width: 900px;
	margin: 0 auto;
	padding-left: var(--programme-padding);
}

div > div:first-child {
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	padding: 1em 0 0.5em;
	border-bottom: 2px solid var(--day-border);
	margin-bottom: 1em;
}

::slotted([slot="date"]) {
	font-size: var(--day-number-size);
	font-weight: bold;
	line-height: 1;
}

::slotted([slot="day"]),
::slotted([slot="month"]) {
	font-size: var(--day-label-size);
	color: var(--day-name-colour);
}