body {
	--tab-bar-size: 80px;

	--clicked-item-background: rgba(0, 0, 0, 0.2);
	--active-item-background: rgba(0, 0, 0, 0.32);
}

tab-bar {
	position: fixed;
	left: 0;
	top: 0;
	width: var(--tab-bar-size);
	height: 100%;
	background-color: var(--design-color);
}

tab-bar.login-view bar-button-item {
	display: none;
}

tab-bar bar-item, tab-bar bar-button-item {
	display: block;
	width: var(--tab-bar-size);
	height: var(--tab-bar-size);
	box-sizing: border-box;
}

tab-bar bar-button-item:active {
	filter: brightness(0.75);
}

tab-bar bar-button-item.active {
	background: var(--active-item-background);
}

tab-bar bar-item img, tab-bar bar-button-item img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}

*:not(.modal-container):not(view-controller-container) > view-controller {
	left: var(--tab-bar-size);
}

.user-menu-button {
	font-size: 1.5em;
	padding: calc((var(--tab-bar-size) - 2em) / 2);
	position: absolute;
	left: 0;
	bottom: 0;
}