body {
	display: flex;
	flex-direction: column;
	background: var(--ButtonFace);
	color: var(--ButtonText);
	font-family: sans-serif;
	font-size: 10pt;
}
.toolbars {
	display: flex;
	flex-direction: column;
	padding: 1px;
	margin-top: 1px;
	margin-bottom: 5px;
	border: 1px solid var(--ButtonShadow);
	box-shadow: 0 1px 0 var(--ButtonHilight), 0 1px 0 var(--ButtonHilight) inset;
}
.toolbar {
	display: flex;
	flex-direction: row;
	align-items: center;
	/* border: 1px solid var(--ButtonShadow); */
	/* margin: 2px; */
	overflow: hidden;
	position: relative;
}
.toolbar-drag-handle {
	flex: 0 0 auto;
	width: 10px;
	box-sizing: border-box;
	align-self: stretch; /* height: 100%; doesn't work in Firefox https://stackoverflow.com/questions/51877276/height-100-not-working-with-flex-box */
	position: relative;
	touch-action: none;
}
.toolbar-drag-handle::before {
	content: "";
	display: block;
	position: absolute;
	left: 2px;
	top: 2px;
	width: 4px;
	bottom: 1px;
	box-sizing: border-box;

	/* copied from .outset-shallow class (CSS is bad at composition) */
	border: 1px solid;
	border-color: rgb(255, 255, 255) rgb(128, 128, 128) rgb(128, 128, 128) rgb(255, 255, 255);
	border-color: var(--ButtonHilight) var(--ButtonShadow) var(--ButtonShadow) var(--ButtonHilight);
}
.toolbar + .toolbar {
	border-top: 1px solid var(--ButtonHilight);
	box-shadow: 0px -1px 0px var(--ButtonShadow);
	margin-top: 2px;
}
.toolbar-overflow-menu-button {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 12px;
	display: flex;
	font-size: 12pt;
	text-align: center;
	padding: 0;
	overflow: hidden;
}
.toolbar-overflow-menu {
	display: flex;
	flex-direction: row;
}
.toolbar hr[aria-orientation="vertical"] {
	display: block;
	width: 0px;
	height: 36px; /* height: 100%; is not working (would do calc(100% - something) if it did) */
	margin: 0;
	border: 0;
	border-left: 1px solid var(--ButtonShadow);
	border-right: 1px solid var(--ButtonHilight);
	margin-left: 2px;
	margin-right: 2px;
}

#address-bar,
#standard-buttons,
#internet-buttons,
.menus {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
}
#address-bar {
	flex: 1;
}
#address-compound-input {
	background: var(--Window);
	color: var(--WindowText);
	flex: 1;
	display: flex;
	margin-top: 1px;
	margin-bottom: 1px;
}
#address-icon {
	display: inline-block;
	margin-right: 4px;
	margin-left: 1px;
	align-self: center;
}
#address {
	flex: 1;
	background: transparent;
	color: inherit;
	border: 0;
	outline: 0;
	padding: 0;
	min-width: 0;
	width: 0; /* this is weird to have to write; but this is needed to prevent minimum width and thus overflow */
}
#address-dropdown-button {
	width: 17px;
	height: 19px;
	padding: 0;
}
label[for="address"] {
	margin-right: 5px;
}

button {
	padding: 5px;
}
.toolbar-button {
	width: 54px;
	height: 40px;
	box-sizing: border-box;
	padding: 0;
	font-size: 12px;
	line-height: 12px;
}
.toolbar-button .label-text {
	margin-top: 24px;
}
.toolbar-compound-button-wrapper {
	display: flex;
	flex-direction: row;
}
.toolbar-dropdown-button {
	padding: 0;
	width: 16px;
	line-height: 30px;
	height: 40px;
}
.toolbar-compound-button-wrapper:hover:not(:active) button.lightweight:enabled {
	/* border: var(--outset-shallow); */
	/* @TODO: DRY with os-gui library, maybe by using JS */
	border-style: solid;
	border-width: 1px;
	border-color: var(--ButtonHilight) var(--ButtonShadow) var(--ButtonShadow) var(--ButtonHilight);
}
.toolbar-compound-button-wrapper .toolbar-button:enabled:hover:active ~ button.lightweight {
	border-style: solid;
	border-width: 1px;
	border-color: var(--ButtonShadow) var(--ButtonHilight) var(--ButtonHilight) var(--ButtonShadow);
}

.hiding-label-text .label-text {
	display: none;
}
.hiding-label-text .toolbar-button {
	width: 27px;
	height: 26px;
	/* @TODO: icon alignment */
}
.hiding-label-text .toolbar-dropdown-button {
	height: 26px;
	width: 13px;
    line-height: 24px; /* for SVG alignment */
}
.hiding-label-text .toolbar-dropdown-button svg {
	width: 12px;
	height: 12px;
}
.toolbar hr[aria-orientation="vertical"] {
	height: 22px;
}

.toolbar-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}
.toolbar-button .icon {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 2px;
}
.toolbar-button .icon {
	background-image: url("../../images/browse-ui-icons-grayscale.png");
}
.toolbar-button:enabled:hover .icon,
.toolbar-compound-button-wrapper:hover .toolbar-button:enabled .icon {
	background-image: url("../../images/browse-ui-icons.png");
}
.toolbar-button:disabled .icon,
#address-dropdown-button:disabled svg,
.toolbar-dropdown-button:disabled svg {
	filter: saturate(0%) opacity(50%); /* fallback */
	filter: url("#disabled-inset-filter");
}

#status-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 2px;
	gap: 2px;
	height: 18px;
}
#status-bar > * {
	height: 16px;
	white-space: nowrap;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}
#status-bar-left {
	width: 250px; /* estimated */
}
#status-bar-middle {
	flex: 1;
}
#status-bar-right {
	width: 170px; /* estimated */
	display: flex;
	gap: 3px;
}
#status-bar-simple {
	display: flex;
	flex-direction: row;
	gap: 5px;
}

#content {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--Window);
	color: var(--WindowText);
	min-width: 0;
	min-height: 0;
}
#content iframe {
	flex: 1;
	min-width: 0;
	min-height: 0;
    border: 0;
}