:root {
	--better-findbar-transform-translateY: 150px;
	--better-findbar-transform-translateX: -50%;
	--better-findbar-position-top: auto;
	--better-findbar-position-bottom: 15px;
	--better-findbar-position-left: 50%;
	--better-findbar-position-right: auto;
}
.browserContainer {
	overflow: clip
}

findbar {
	display: flex !important;

	border-radius: var(--zen-border-radius) !important;
	margin: 0px !important;

	width: 90% !important;
	max-width: 800px;

	height: auto !important;

	position: absolute !important;
	top: var(--better-findbar-position-top);
	bottom: var(--better-findbar-position-bottom);
	left: var(--better-findbar-position-left);
	right: var(--better-findbar-position-right);
	transform: translateX(var(--better-findbar-transform-translateX)) translateY(0);

	overflow: unset !important;
	box-shadow: var(--box-shadow-10);

	background: var(--zen-colors-tertiary) !important;
	border: 1px solid var(--zen-colors-border) !important;

	transition: transform 0.35s ease !important;

	visibility: visible !important;
	opacity: 1 !important;

	& .findbar-container {
		flex-wrap: wrap;
		overflow-x: auto !important;
		height: auto !important;

		row-gap: 10px;

		& > :first-child {
			width: 100% !important;
		}

		& .findbar-textbox {
			flex-grow: 1;
		}
	}

	&[hidden="true"] {
		transform: translateX(var(--better-findbar-transform-translateX)) translateY(var(--better-findbar-transform-translateY));
	}

	@starting-style {
		transform: translateX(var(--better-findbar-transform-translateX)) translateY(var(--better-findbar-transform-translateY));
	}
}

/* Horizontal Position */
body:has(
		#theme-Better-Find-Bar[theme-better_find_bar-horizontal_position="left"]
	) {
	--better-findbar-transform-translateX: 0%;
	--better-findbar-position-left: 15px;
	--better-findbar-position-right: auto;
}

body:has(
		#theme-Better-Find-Bar[theme-better_find_bar-horizontal_position="right"]
	) {
	--better-findbar-transform-translateX: 0%;
	--better-findbar-position-left: auto;
	--better-findbar-position-right: 15px;
}

body:has(
		#theme-Better-Find-Bar[theme-better_find_bar-vertical_position="top"]
	) {
	--better-findbar-transform-translateY: -150px;
	--better-findbar-position-bottom: auto;
	--better-findbar-position-top: 15px;
}


/* Background blur */
@media (-moz-bool-pref: "theme.better_find_bar.transparent_background") {
	findbar, findbar .findbar-textbox:not([status="notfound"]) {
		backdrop-filter: blur(8px);

		background: color-mix(in hsl, var(--zen-colors-tertiary), transparent 30%) !important;
	}

	findbar .findbar-textbox:not([status="notfound"]) {
		background: color-mix(in hsl, var(--zen-colors-tertiary), transparent 10%) !important;
	}
}