auto-status-bar.css

#browser:not(:has(.toolbar-editor)) footer > .toolbar-statusbar::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 12px;
	z-index: -1;
}

#browser:not(:has(.toolbar-editor)) footer > .toolbar-statusbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: fit-content;
	height: fit-content;
	background-color: var(--colorBg);
	border-radius: var(--radius);
	border: none;
	box-shadow: none;
	transition: top .25s ease-out .5s, box-shadow 0s .75s !important;
}

#browser:not(:has(.toolbar-editor)) footer > .toolbar-statusbar:is(:hover, :focus-within, :has(.button-pressed)) {
	top: -27px;
	box-shadow: 0 0 0 1px var(--colorBorder), 0 2px 6px hsl(0deg 0% 0% / 25%);
	transition: top .15s ease-out .08s, box-shadow 0s .08s !important;
}

#browser:not(:has(.toolbar-editor)) footer > .toolbar-statusbar > div {
	max-height: 30px;
	transition: max-height .15s ease-out .08s !important;
}

#browser:not(:has(.toolbar-editor)) footer > .toolbar-statusbar:not(:hover):not(:focus-within):not(:has(.button-pressed)) > div {
	overflow: hidden;
	max-height: 0px;
	transition: max-height .25s ease-out .5s !important;
}

#browser:not(:has(.toolbar-editor)) footer > .toolbar-statusbar .StatusInfo {
	position: fixed;
	left: 2px;
	bottom: 2px;
	min-height: 20px;
	padding: 1px 3px;
	background: var(--colorBgDark);
	border-radius: var(--radiusHalf);
	pointer-events: none;
	z-index: 3;
}

/* statusbar with tabbar on bottom */
#browser.tabs-bottom:not(:has(.toolbar-editor)) footer {
	overflow: visible;
	display: flex;
	flex-flow: column;
}

#browser.tabs-bottom:not(:has(.toolbar-editor)) footer > .toolbar-statusbar .StatusInfo {
	bottom: unset;
	margin-top: 4.5px;
}

#browser.tabs-bottom:not(:has(.toolbar-editor)) footer > .toolbar-statusbar:not(:hover):not(:focus-within):not(:has(.button-pressed)) .StatusInfo {
	margin-top: -26.5px;
	transition: margin-top .27s ease-out .48s !important;
}