.display-builder .shoelace-button-search,
.display-builder .db-search-instance {
  width: 100%;
}

/* Search filter tweaks to hide the form and handle results */
/* @see components/display_builder/display_builder.js */
.display-builder .db-form .db-search-instance {
  display: none;
}
/* @todo add instance form when possible, currently only apply to styles and
 skins because instance form do not have an easy to use markup */
.display-builder .db-form:has(.shoelace-tabs [active][data-target$="styles"]) .db-search-instance,
.display-builder .db-form:has(.shoelace-tabs [active][data-target$="skins"]) .db-search-instance {
  display: block;
}
.db-search-instance {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.db-form-search-found .db-island-styles .db-search-found,
.db-form-search-found .db-island-tokens .db-search-found {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  padding: 0 0.5rem 0.5rem 0.5rem;
  border: 1px solid var(--sl-color-success-600);
  background-color: var(--sl-color-success-200);
}
.db-form-search-found .db-island-styles details > fieldset:not(.db-element-search-in),
.db-form-search-found .db-island-styles details > div:not(.db-element-search-in),
.db-form-search-found .db-island-tokens details > fieldset:not(.db-element-search-in),
.db-form-search-found .db-island-tokens details > div:not(.db-element-search-in) {
  display: none;
}
.db-form-search-found .db-island-styles .db-element-search-in,
.db-form-search-found .db-island-tokens .db-element-search-in {
  display: block;
}

.display-builder .shoelace-button-search,
.db-form .db-search-instance {
  margin-bottom: 0.5rem;
  padding: 0;
  border: 0 none;
}
