/* Added in a separate file as the component isn't styled otherwise. */

.navbar__search > * {
  max-width: 47.5rem;
  width: 100%;
  margin: 0 auto;
}

.main-wrapper .navbar__search > button {
  right: calc(50% - 47.5rem / 2 + 4rem);
  width: auto;
  background: var(--ifm-navbar-search-input-background-color);
  border-radius: .25rem;
  width: 2rem;
  height: 2rem;
  transition: background-color .2s;
}

.home__heroBanner .navbar__search span {
  width: 100%;
}

.home__heroBanner .navbar__search input::placeholder {
  color: var(--ifm-color-content);
}

.home__heroBanner
  [class="searchHintContainer_node_modules-@easyops-cn-docusaurus-search-local-dist-client-client-theme-SearchBar-SearchBar-module"] {
  display: none !important;
}

.home__heroBanner .navbar__search input {
  background-color: #fff;
  border-radius: 0.75em;
  height: 4.875rem;
  display: block;
  width: 100%;
  border: 3px solid black;
  padding: 1rem 1.5rem;
  background-position: right 1.5rem center;
  margin-right: auto;
  margin-left: auto;
  font-size: 1.125rem;
  color: var(--ifm-color-content);
}
