/* Consumer extension styles. Every value is a public SW token (see ../DESIGN_RULES.md); the
   38px field height, 12px label / 14px bold value and 1px gradient hover ring follow the SW field rules. */
.app-sw-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  height: var(--hm-sw-header-field-height);
  padding: 0 6px 0 11px;
  border: 1px solid var(--hm-sw-header-property-border-color);
  border-radius: var(--hm-sw-header-property-radius);
  background: var(--hm-sw-header-property-background);
  box-shadow: var(--hm-sw-header-property-shadow);
}
/* Hover: the bordered-control rule — the 1px border becomes the yellow gradient; nothing moves. */
.app-sw-search::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--hm-sw-header-hover-border-width));
  padding: var(--hm-sw-header-hover-border-width);
  border-radius: inherit;
  background: var(--hm-sw-header-hover-border-gradient);
  /* Ring only: the content box is cut out (prefixed first, the standard declaration last wins). */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
}
.app-sw-search:hover:not([data-disabled])::after { opacity: 1; }
.app-sw-search__text { display: flex; flex-direction: column; min-width: 0; }
.app-sw-search__label {
  height: 14px;
  font-size: var(--hm-sw-header-label-size);
  line-height: 14px;
  letter-spacing: 0.02em;
  text-shadow: var(--hm-sw-header-label-outline);
}
.app-sw-search__button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--hm-sw-header-property-radius);
}
/* Text-only hover / selected color, like the SW toggles. */
.app-sw-search__button:hover:not(:disabled) { color: var(--hm-sw-header-selected-color); }