.Browser {
	--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-0);
}

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

.IconButton {
	--color: var(--foreground-color-0);

	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;
}

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

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

.IconButton:disabled {
	--color: var(--foreground-color-2);
}

.IconButton svg {
	height: 100%;
}

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

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

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