@import './shared.css';

:host {
	--session-accent:       #4a6fa5;
	--session-bg:           #f8f9ff;
	--session-name-size:    1em;
	--session-chair-size:   0.8em;
	--session-chair-colour: #666;
	--block-border-colour:  var(--session-accent);
	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(--session-bg);
}

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:first-child {
	width: var(--tab-time);
	white-space: nowrap;
	flex-shrink: 0;
	color: #444;
}

div > div:first-child > div {
	display: flex;
	flex-direction: column;
	padding-left: calc(var(--tab-title) - var(--tab-time));
}

div > div:last-child {
	padding: 0.3em var(--block-padding-left) 0.5em var(--block-padding-left);
}

::slotted([slot="session-name"]) {
	font-size: var(--session-name-size);
	font-weight: bold;
}

::slotted([slot="chair"]) {
	font-size: var(--session-chair-size);
	color: var(--session-chair-colour);
}