:root {
	--divider-size: 5px;
}

html {
	box-sizing: border-box;
	font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma,
		Sans-Serif;
	font-weight: normal;
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	margin: 0;
	font-size: 1.5em;
}

.main-grid {
	height: 100vh;
	width: 100vw;

	display: grid;
	grid-template-rows: 1fr auto 1fr;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas:
		'meeting divider--vr notes'
		'divider--hr divider--vr notes'
		'hud divider--vr notes';
}

.main-grid > * {
	width: 100%;
	height: 100%;
}

/* DIVIDERS */

.divider {
	background-color: black;
}

.divider--hr {
	grid-area: divider--hr;

	height: var(--divider-size);
}

.divider--hr:hover {
	cursor: ns-resize;
}

.divider--vr {
	grid-area: divider--vr;

	width: var(--divider-size);
}

.divider--vr:hover {
	cursor: ew-resize;
}

/* MEETING CONTAINER */

.meeting {
	grid-area: meeting;

	background-color: pink;
}

.meeting iframe {
	width: 100%;
	height: 100%;
}

.meeting iframe.no-mouse-events {
	pointer-events: none;
}

/* HUD CONTAINER */

.hud {
	grid-area: hud;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* NOTES CONTAINER */

.notes {
	grid-area: notes;

	display: grid;
	grid-template-rows: auto auto 1fr;
}

.notes--options,
.notes--toolbar {
	--flex-gap-size: 0.45rem;

	display: flex;
	align-items: center;
	flex-wrap: wrap;

	padding: 0 calc(var(--flex-gap-size) / 2);

	background-color: whitesmoke;
	border-bottom: 2px solid black;

	position: relative;
}

.notes--options > *,
.notes--toolbar > * {
	margin: calc(var(--flex-gap-size) / 2);
}

.note-name {
	flex: 1;
}

.note-name--input {
	width: 15rem;

	font-size: 1rem;
	padding: 5px;

	outline: none;
	border: none;
	border-bottom: 2px solid black;
	background-color: transparent;
}

.note--list {
	display: none;

	position: absolute;
	top: 50%;
	left: 5px;
	z-index: 100;

	list-style: none;

	background-color: whitesmoke;
	border: 2px solid black;

	width: 15rem;
	padding: 5px;
}

.note--list.show {
	display: block;
}

.note--list .note {
	position: relative;
	cursor: pointer;
}

.note--list .note::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;

	width: 100%;
	height: 2px;
	background-color: rgba(0, 0, 0, 0.1);
}

/* EDITOR */

.notes--editor {
	--line-height: 1.4rem;
	--font-size: 1rem;

	display: grid;
	grid-template: 1fr / 1fr;

	padding: 0.5rem;
	margin-bottom: 1rem;

	overflow-y: scroll;
}

.editor--input {
	font-size: var(--font-size);
	line-height: var(--line-height);

	padding: 0.5rem;

	border-bottom: 2px solid black;
}

.editor--input:focus {
	outline: none;
	border: 2px solid black;
	border-radius: 10px;
}

.editor--input > * {
	margin: 0;
}

/* BUTTONS */

.button {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 2px;

	padding: 0.5rem;

	background-color: transparent;
	border: none;
	border-radius: 15%;

	display: flex;
	justify-content: center;
	align-items: center;
}

.button:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

.button__drop-down {
	max-width: 50px;
}

.button.note--list__show {
	display: inline;
}

.unsaved {
	border: 2px solid black;
	animation: shake-top 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

.unsaved::after {
	content: '*';
}

@keyframes shake-top {
	0%,
	100% {
		transform: rotate(0deg);
		transform-origin: 50% 0;
	}
	10% {
		transform: rotate(2deg);
	}
	20%,
	40%,
	60% {
		transform: rotate(-4deg);
	}
	30%,
	50%,
	70% {
		transform: rotate(4deg);
	}
	80% {
		transform: rotate(-2deg);
	}
	90% {
		transform: rotate(2deg);
	}
}