@use "@docsearch/css/dist/style.css";

:root {
  --docsearch-primary-color: var(--tblr-primary);
  --docsearch-searchbox-background: var(--tblr-bg-surface);
  --docsearch-searchbox-focus-background: var(--tblr-bg-surface);
  --docsearch-text-color: var(--tblr-body-text);
  --docsearch-key-shadow: 0 0 0 1px var(--tblr-border-color);
  --docsearch-key-gradient: var(--tblr-bg-surface-secondary);
}

.col-docs {
  width: 15rem;
}

.bg-docs-gradient {
  @media (min-width: 992px) {
    background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--tblr-primary) 4%, transparent), transparent 80%) no-repeat 0 0 / 800px 800px !important;
  }
}

.DocSearch-Button {
  width: 100%;
  box-shadow: 0 0 0 1px var(--tblr-border-color);
  font-weight: var(--tblr-font-weight-normal);
  transition: all 0.2s ease-in-out;
}

.DocSearch-SearchBar {
  display: flex;
  padding: var(--docsearch-spacing) var(--docsearch-spacing) 0;
  background-color: var(--tblr-bg-surface) !important;
}

.DocSearch-Hit-source {
  background: none !important;
}

.DocSearch-Dropdown {
  background-color: var(--tblr-bg-surface) !important;
}

.DocSearch-Hit a {
  background-color: var(--tblr-bg-surface-secondary) !important;
  border: 1px solid var(--tblr-border-color) !important;
  color: var(--tblr-body-color) !important;
  box-shadow: none !important;
  
  &:hover {
    background-color: var(--tblr-bg-surface-tertiary) !important;
    border-color: var(--tblr-border-color-active) !important;
  }
}

.DocSearch-Hit-Container {
  color: var(--tblr-body-color) !important;
}

.DocSearch-Hit-title {
  color: var(--tblr-body-color) !important;
}

.DocSearch-Hit-path {
  color: var(--tblr-muted) !important;
}

.DocSearch-Hit[aria-selected="true"] a {
  background-color: var(--tblr-primary) !important;
  border-color: var(--tblr-primary) !important;
  color: var(--tblr-primary-fg) !important;
}

.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-Container,
.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-title,
.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-path {
  color: var(--tblr-primary-fg) !important;
}

.DocSearch-Modal {
  background-color: var(--tblr-bg-surface) !important;
  box-shadow: var(--tblr-shadow-dropdown) !important;
}

.DocSearch-Form {
  background-color: var(--tblr-bg-surface-secondary) !important;
  border: 1px solid var(--tblr-border-color) !important;
}

.DocSearch-Input {
  color: var(--tblr-body-color) !important;
  
  &::placeholder {
    color: var(--tblr-muted) !important;
  }
}

.DocSearch-Footer {
  background-color: var(--tblr-bg-surface) !important;
  border-top: 1px solid var(--tblr-border-color) !important;
  box-shadow: none !important;
}

.DocSearch-Button-Key {
  top: 0;
}

.DocSearch-Container {
  z-index: 10000;
}

.no-transition {
  * {
    transition: none !important;
  }
}

.example > .modal,
.example > .offcanvas {
  display: block !important;
  position: relative !important;
}

.example > .offcanvas-backdrop {
  position: absolute !important;
}

.shiki {
  background: var(--tblr-gray-900) !important;
  color: var(--tblr-gray-300) !important;
}

code {
  ::selection {
    background: var(--tblr-primary);
  }
}