.Container {
	--header-height: 3.5rem;
	--nav-bar-height: 2.25rem;

	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.Header {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: var(--header-height);
	background-color: var(--background-color-a);
}

.Nav-bar {
	display: flex;
	gap: 1rem;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: var(--nav-bar-height);
	padding: 1.25rem;
}

.Icon-button {
	--color: var(--foreground-color-a);

	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 1rem;
	width: auto;
	padding: 0;
	background: none;
	border: none;
	outline: none;
	aspect-ratio: 1;
	cursor: pointer;
}

.Icon-button::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0%);
	border-radius: 9999px;
	transform: scale(100%);
	transform-origin: center;
	transition: all 200ms ease-in-out;
}

.Icon-button:hover::after,
.Icon-button:focus-visible::after {
	background-color: rgba(255, 255, 255, 10%);
	transform: scale(175%);
}

.Icon-button:disabled {
	--color: var(--foreground-color-c);
}

.Icon-button svg {
	height: 100%;
}

.Icon-button svg path {
	fill: var(--color);
	transition: fill 100ms ease-in-out;
}

.Search-bar {
	flex: 1;
	padding: 0.25rem 0.5rem;
	background-color: var(--background-color-c);
	border: none;
	border-radius: 0.5rem;
	outline: none;
	font-family: inherit;
	font-size: 0.875em;
}

.Bookmarks {
	height: calc(var(--header-height) - var(--nav-bar-height));
}