Form CSS is broken

Converting SASS to pure CSS does not change anything

.display-builder .db-form * {
  font-size: var(--sl-button-font-size-medium) !important;
}

.display-builder .db-form .shoelace-tabs {
  margin-bottom: 0.5rem;
}

.display-builder .db-form .ui-icons-wrapper  .ui-icons-select {
  display: inline-block;
  margin-top: 0.5rem;
}

.display-builder .db-form .ui-icons-wrapper  .ui-icons-select .form-item--error-message {
  display: none;
}

.display-builder .db-form .ui-icons-wrapper  .ui-icons-select > div {
  display: contents;
}

.display-builder .db-form .ajax-progress-throbber {
  display: none !important;
}

.display-builder .db-form .ui-icons-settings-wrapper {
    margin-top: 0.5rem;
}

Moving back to https://git.drupalcode.org/project/display_builder/-/blob/4b188bc51d868a... is OK

It's not broken, it was cleaned on purpose. Hence the commit title: 'fix: instance form css cleanup'.
Too many specific fixes and quirks depending front theme, so better to start from clean and see what we can do without bleeding or tweaks.

It's not sass, just modern nested css and variables.