#search-bar {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1em;
  align-items: center;
  grid-template-columns: auto 1fr;
  padding: 1em 40px;
}

oc-search-bar {
  --decoration: var(--brand-grey-3);
  --search-results-background: #ffffff;
  --search-results-foreground: var(--brand-grey-1);
  --search-result-title: var(--brand-blue);
  --search-result-hover-backgrounnd:
    linear-gradient(
    0deg,
    rgba(35, 31, 32, 0.05) 0%,
    rgba(35, 31, 32, 0.05) 100%
  ), #fff;
  opacity: 0;
  position: relative;
}

/* Make sure to hide the input before the JavaScript is loaded */
oc-search-bar[data-state],
oc-search-bar[data-state*=""] {
  opacity: 1;
}

.search_label {
  color: #ffffff;
  font-family: "Teko", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.72px;
  line-height: 1em;
  text-transform: uppercase;
}

#search-toggle button[data-state="enabled"] {
  color: #ffcc2b;
}

@media screen and (max-width: 768px) {
  .search_label {
    display: none;
  }

  #search-bar {
    grid-template-columns: 1fr;
    padding: 1em;
  }
}