@import '@docsearch/css';

.docsearch {
  --docsearch-searchbox-background: rgba(247, 248, 250, 1);
  --docsearch-searchbox-focus-background: rgba(247, 248, 250, 1);
  color: rgb(33, 53, 71);
}

:root[data-theme='dark'] .docsearch {
  --docsearch-primary-color: var(--qwik-dark-blue);
  --docsearch-text-color: var(--text-color);
  --docsearch-highlight-color: var(--qwik-blue);
  --docsearch-muted-color: var(--secondary-text-color);
  --docsearch-logo-color: var(--qwik-dark-blue);
  --docsearch-modal-background: var(--bg-color);
  --docsearch-modal-shadow: #1d1d1d;
  --docsearch-searchbox-background: var(--bg-color);
  --docsearch-searchbox-focus-background: var(--bg-secondary-color);
  --docsearch-hit-color: var(--text-color);
  --docsearch-hit-active-color: var(--bg-color);
  --docsearch-hit-background: var(--bg-secondary-color);
  --docsearch-hit-shadow: 0 1px 3px 0 #1d1d1d;
  --docsearch-key-gradient: linear-gradient(-225deg, var(--bg-secondary-color), #1d1d1d);
  --docsearch-key-shadow: inset 0 -2px 0 0 var(--bg-color), inset 0 0 1px 1px #1d1d1d,
    0 1px 2px 1px rgba(30, 35, 90, 0.4);
  --docsearch-footer-background: var(--bg-color);
  --docsearch-footer-shadow: 0 -1px 0 0 #525252, 0 -3px 6px 0 rgba(69, 98, 155, 0.12);
}

/* to override global.css */
.docsearch .DocSearch-Button {
  background-color: var(--docsearch-searchbox-background);
  --docsearch-text-color: var(--docsearch-muted-color);
  border: 2px solid var(--interactive-text-color);
  --docsearch-muted-color: var(--interactive-text-color);
  margin: 0 16px;
}

@media (min-width: 1000px) {
  .docsearch.ai-result-open {
    --docsearch-modal-width: 1000px;
    /* max-width: 1000px; */
  }

  .docsearch.ai-result-open .DocSearch-Dropdown-Container {
    max-width: 450px;
  }

  .docsearch.ai-result-open .qwikgpt-box {
    position: absolute;
    left: 475px;
    top: 80px;
    right: 15px;
    max-height: calc(100% - 100px);
    overflow: auto;
    border-radius: 4px;
    box-shadow: var(--docsearch-hit-shadow);
    padding: 5px 20px 20px;
  }

  .docsearch.ai-result-open .DocSearch-Dropdown {
    min-height: 700px;
    max-height: 70vh;
  }
}

.docsearch kbd {
  font-family: system-ui;
}

.docsearch ul li {
  text-align: left;
  margin: 0 0 4px 0;
  padding: 0;
}

.docsearch a:hover {
  text-decoration: none;
}

@media (max-width: 1023px) {
  .docsearch {
    display: inline-block;
    margin: 0 auto;
  }
}
