Generated by SassMeister.com.

input.scss

@namespace url('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul');
@namespace htmlNs url('http://www.w3.org/1999/xhtml');

// #region Features

$feature-floating: true !default;
$feature-floating-alignment: bottom !default;
$feature-floating-distance: 18px !default;

$feature-buttons: true !default;
$feature-buttons-grouped: true !default;

// #endregion

$space-unit: 8px;

%bordered-control {
	border: 1px solid ThreeDShadow;
}

findbar {
	position: absolute;
	contain: content;
	border: 1px solid var(--chrome-content-separator-color);

	@if $feature-floating {
		right: $feature-floating-distance;
		#{$feature-floating-alignment}: $feature-floating-distance;
		transform-origin: #{$feature-floating-alignment} center;
		border-radius: var(--toolbarbutton-border-radius);
	} @else {
		border-bottom-left-radius: var(--toolbarbutton-border-radius);
		border-bottom-right-radius: var(--toolbarbutton-border-radius);
		border-top-width: 0 !important;
		top: -1px;
		right: 44px;
		transform-origin: top center;
	}

	animation: 0.1s keyframes-scale-in;

	&[hidden='true'] {
		animation: 0.1s keyframes-scale-out;
	}

	checkbox {
		margin: 0 !important;

		@if $feature-buttons {
			@extend %bordered-control;

			@if $feature-buttons-grouped {
				&:not(:last-of-type) {
					border-top-right-radius: 0;
					border-bottom-right-radius: 0;
				}

				&:not(:first-of-type) {
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;

					border-left-width: 0;
				}
			} @else {
				&:not(:first-of-type) {
					margin-inline-start: $space-unit !important;
				}
			}

			padding: 3px 6px;
			border-radius: var(--toolbarbutton-border-radius);

			color: var(--button-color);
			background-color: var(--button-bgcolor);

			&:hover {
				background-color: var(--button-hover-bgcolor);
			}

			&:active {
				background-color: var(--button-active-bgcolor);
			}

			&[checked='true'] {
				color: var(--button-primary-color);
				background-color: var(--button-primary-bgcolor);

				&:hover {
					background-color: var(--button-primary-hover-bgcolor);
				}

				&:active {
					background-color: var(--button-primary-active-bgcolor);
				}
			}

			&:focus-visible {
				outline: var(--focus-outline);
				outline-offset: var(--focus-outline-inset);
			}

			.checkbox-check {
				display: none;
			}
		} @else {
			&:not(:first-of-type) {
				margin-inline-start: $space-unit !important;
			}
		}
	}

	[anonid='findbar-textbox-wrapper'] {
		margin-inline-end: $space-unit * if($feature-buttons, 1, 2) !important;

		htmlNs|input {
			@extend %bordered-control;

			@if $feature-buttons and $feature-buttons-grouped {
				border-top-right-radius: 0 !important;
				border-bottom-right-radius: 0 !important;
			}
		}

		toolbarbutton {
			@extend %bordered-control;

			color: var(--button-color);
			background-color: var(--button-bgcolor);
			border-width: 1px !important;

			margin-inline: 0 !important;

			@if $feature-buttons and $feature-buttons-grouped {
				&:last-of-type {
					border-top-left-radius: 0 !important;
					border-bottom-left-radius: 0 !important;
				}
				&:not(:last-of-type) {
					border-radius: 0 !important;
					border-right-width: 0 !important;
				}
			}
		}
	}

	.findbar-label {
		margin: 0 !important;
		margin-inline-start: $space-unit !important;
	}

	description.findbar-label:empty {
		display: none;
	}
}

@keyframes keyframes-scale-in {
	0% {
		transform: scaleY(0);
	}
	100% {
		transform: scaleY(1);
	}
}

@keyframes keyframes-scale-out {
	0% {
		transform: scaleY(1);
	}
	100% {
		transform: scaleY(0);
	}
}

output.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace htmlNs url("http://www.w3.org/1999/xhtml");
findbar [anonid=findbar-textbox-wrapper] toolbarbutton, findbar [anonid=findbar-textbox-wrapper] htmlNs|input, findbar checkbox {
  border: 1px solid ThreeDShadow;
}

findbar {
  position: absolute;
  contain: content;
  border: 1px solid var(--chrome-content-separator-color);
  right: 18px;
  bottom: 18px;
  transform-origin: bottom center;
  border-radius: var(--toolbarbutton-border-radius);
  animation: 0.1s keyframes-scale-in;
}
findbar[hidden=true] {
  animation: 0.1s keyframes-scale-out;
}
findbar checkbox {
  margin: 0 !important;
  padding: 3px 6px;
  border-radius: var(--toolbarbutton-border-radius);
  color: var(--button-color);
  background-color: var(--button-bgcolor);
}
findbar checkbox:not(:last-of-type) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
findbar checkbox:not(:first-of-type) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0;
}
findbar checkbox:hover {
  background-color: var(--button-hover-bgcolor);
}
findbar checkbox:active {
  background-color: var(--button-active-bgcolor);
}
findbar checkbox[checked=true] {
  color: var(--button-primary-color);
  background-color: var(--button-primary-bgcolor);
}
findbar checkbox[checked=true]:hover {
  background-color: var(--button-primary-hover-bgcolor);
}
findbar checkbox[checked=true]:active {
  background-color: var(--button-primary-active-bgcolor);
}
findbar checkbox:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-inset);
}
findbar checkbox .checkbox-check {
  display: none;
}
findbar [anonid=findbar-textbox-wrapper] {
  margin-inline-end: 8px !important;
}
findbar [anonid=findbar-textbox-wrapper] htmlNs|input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
findbar [anonid=findbar-textbox-wrapper] toolbarbutton {
  color: var(--button-color);
  background-color: var(--button-bgcolor);
  border-width: 1px !important;
  margin-inline: 0 !important;
}
findbar [anonid=findbar-textbox-wrapper] toolbarbutton:last-of-type {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
findbar [anonid=findbar-textbox-wrapper] toolbarbutton:not(:last-of-type) {
  border-radius: 0 !important;
  border-right-width: 0 !important;
}
findbar .findbar-label {
  margin: 0 !important;
  margin-inline-start: 8px !important;
}
findbar description.findbar-label:empty {
  display: none;
}

@keyframes keyframes-scale-in {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes keyframes-scale-out {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}