:root {
  --docsearch-primary-color: var(--ifm-color-primary);
  --docsearch-text-color: var(--ifm-font-color-base);
  --docsearch-searchbox-background: transparent !important;
  --docsearch-searchbox-focus-background: transparent !important;
}

.DocSearch-Button {
  margin: 0;
  transition: all var(--ifm-transition-fast)
    var(--ifm-transition-timing-default);
  font-size: inherit;
  outline: transparent !important;
  border-radius: 4px;
  border: 1px solid var(--click-color-stroke) !important;
  background: var(--click-color-field-background);
}

[data-theme="light"] .DocSearch-Button {
  background-color: rgb(250, 250, 250);
  color: black;
}
.DocSearch-Button-Placeholder {
  font-size: inherit;
}

[data-theme='dark'] .DocSearch-Button-Placeholder {
  color: white;
}

.DocSearch-Container {
  z-index: calc(var(--ifm-z-index-fixed) + 1);
}

.DocSearch-Button-Key {
  box-shadow: none;
  background: transparent;
  font-size: inherit;
  line-height: 1;
  padding: 0;
  margin: 0;
  height: 14px;
  top: 0;
  width: auto;
}

.DocSearch-Button-Keys {
  gap: 1rem;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--click-color-background-muted);
  border: 1px solid var(--click-color-stroke);
}

.DocSearch-Button-Key:first-of-type::after {
  content: "+";
  position: absolute;
  left: 100%;
}

.DocSearch-Logo {
  display: none !important;
}

.DocSearch-Dropdown { 
  max-height: calc(min(90vh) - 180px) !important; 
}

/* Mobile styles */
@media (max-width: 768px) {
  .DocSearch-Dropdown { 
    max-height: calc(100vh - 120px) !important;
    width: calc(100vw - 20px) !important;
    left: 10px !important;
    right: 10px !important;
    position: fixed !important;
    z-index: 9999 !important;
  }
  
  .DocSearch-SearchBar {
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
  }
}