@import './shared.css';

:host {
	--keynote-bg:               #fff8f0;
	--keynote-name-colour:      #a05a2c;
	--keynote-presenter-colour: #333;
	--keynote-title-colour:     #666;
	--block-border-colour:      #a05a2c;
	display: block;
	font-size: var(--block-font-size);
	margin: 0.3em 0;
	border-left: var(--block-border-width) solid var(--block-border-colour);
	background: var(--keynote-bg);
}

/* Header row: time + session name */
div > div:first-child {
	display: flex;
	align-items: flex-start;
	padding: 0.5em var(--block-padding-left) 0.3em var(--block-padding-left);
}

div > div:first-child > span {
	width: var(--tab-time);
	white-space: nowrap;
	flex-shrink: 0;
	color: #444;
}

div > div:first-child > div {
	padding-left: calc(var(--tab-title) - var(--tab-time));
	font-weight: bold;
	color: var(--keynote-name-colour);
}

/* Content: presenter + title */
div > div:last-child {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	padding: 0.2em var(--block-padding-left) 0.5em calc(var(--tab-slot) + var(--block-padding-left));
}

::slotted([slot="presenter"]) {
	font-weight: bold;
	color: var(--keynote-presenter-colour);
}

::slotted([slot="title"]) {
	color: var(--keynote-title-colour);
}