body>header {
	--header-height: 40px;

	padding: 1vw;
	height: var(--header-height);
	border-bottom: 1px solid var(--neutral-color);
	display: flex;
	flex-shrink: 0;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	view-transition-name: none;

	>.actor {
		>div {
			display: flex;
			gap: 0.3em;
			align-items: baseline;
		}

		.id,
		.status {
			font-size: 90%;
			color: var(--neutral-color);
		}
	}

	>hamburger-menu,
	>.hamburger,
	>menu {
		z-index: 1;
		view-transition-name: menu-button;
	}

	>menu {
		position: fixed;
		bottom: 0;
		right: 0;
		translate: 100%;
		min-width: fit-content;
		width: 20vw;
		height: calc(100dvh - 2vw - var(--header-height));
		border-left: 1px solid var(--neutral-color);
		background-color: var(--surface-color);
		display: flex;
		flex-direction: column;
		gap: 6px;
		transition: translate 0.2s, background-color 0.2s;
		view-transition-name: side-menu;

		li {
			font-size: 1.1rem;

			&[role="none"] {
				font-size: 1.0rem;
			}

			>a {
				text-decoration-line: none;
				color: var(--text-color);
				display: flex;
				align-items: center;

				>i {
					font-size: 40px;
					line-height: 1.2;
				}
			}

			&.icons {
				display: flex;

				i {
					font-size: 24px;
					line-height: 1;
				}

				>.partition {
					flex-grow: 0.8;
				}
			}
		}
	}

	>[open]+menu {
		translate: 0;
	}
}