main.matrix-main {
	--room-list-width: 350px;
	--right-panel-width: 300px;

	position: fixed;
	inset: 0;

	display: grid;
	grid-template:
		" roomlist               rh1 roomview" 1fr
		/ var(--room-list-width) 0   1fr;

	&.right-panel-open {
		grid-template:
			" roomlist               rh1 roomview rh2 rightpanel              " 1fr
			/ var(--room-list-width) 0   1fr      0   var(--right-panel-width);
	}

	@media screen and (max-width: 45rem) {
		&, &.right-panel-open {
			grid-template:
				"roomlist roomview rightpanel" 1fr
				/ 100%    100%    100%;
		}
		/* Note: this timeout must match the one in MainScreen.tsx */
		transition: .3s;

		@media (prefers-reduced-motion: reduce) {
			transition: none;
		}

		&.room-selected {
			translate: -100% 0;
		}

		&.right-panel-open {
			translate: -200% 0;
		}
	}

	> div.room-list-resizer {
		grid-area: rh1;
		z-index: 1;
	}

	> div.right-panel-resizer {
		grid-area: rh2;
		z-index: 1;
	}
}

div.sync-status {
	position: fixed;
	top: 1rem;
	left: 50%;
	transform: translate(-50%, 0);
	padding: 1.5rem;
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	border-radius: .5rem;
	display: flex;
	gap: 1rem;

	&.errored {
		border: 2px solid var(--error-color);
		color: var(--error-color);
		font-weight: bold;
	}
}