[id=search] p {
  display: flex;
  margin: 0;
  gap: 0;
  width: 100%;
}

[id=search] :is([id=q], button) {
  font: normal 2rem / 1.5 var(--accent-type);
  padding: .5rem 1rem;
}

[id=q] {
  border: 1px inset var(--foreground);
  border-radius: .5rem 0rem 0rem .5rem;
  flex: 0 1 auto;
}

[id=search] input:focus {
  background: var(--input-focus-background);
}

[id=search] button {
  background: var(--menu);
  color: var(--background);
  border-inline-start-width: 0px;
  border: 2px solid transparent;
  border-radius: 0 .5rem .5rem 0;
  flex-basis: auto;
}

[id=search] button:is(:focus,:hover) {
  background: var(--menu-hover);
  color: var(--background);
  border-inline-start-width: 0px;
  border: 2px solid transparent;
  border-radius: 0 .5rem .5rem 0;
}

@media screen and (prefers-color-scheme: dark) {
  [id=search] input {
    background: #333;
    border-color: transparent;
  }
  
  [id=search] input:focus {
    background: #111;
  }
  
  [id="search"] button {
    color: var(--foreground)
  }
  
  [id="search"] button:is(:focus, :hover) {
    color: currentColor;
  }
}