#docsearch {
    margin: 0 auto;
    button {
        margin: 0;
    }
}

:root {
    --docsearch-primary-color: rgb(17 24 39)!important;
    --docsearch-text-color: #374151!important;
    --docsearch-spacing: 12px!important;
    --docsearch-icon-stroke-width: 1.4!important;
    --docsearch-highlight-color: var(--docsearch-primary-color)!important;
    --docsearch-muted-color: #6B7280!important;
    --docsearch-container-background: rgba(101, 108, 133, 0.8)!important;

    --docsearch-modal-width: 560px!important;
    --docsearch-modal-height: 600px!important;
    --docsearch-modal-background: #ffffff!important;
    --docsearch-modal-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.5),
    0 3px 8px 0 rgba(0, 0, 0, 0.12)!important;

    --docsearch-searchbox-height: 40px!important;
    --docsearch-searchbox-background: #f1f5f9!important;
    --docsearch-searchbox-focus-background: #ffffff!important;
    --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color)!important;

    --docsearch-hit-color: #374151!important;
    --docsearch-hit-active-color: #ffffff!important;
    --docsearch-hit-background: #ffffff!important;
    --docsearch-hit-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)!important;
}

.dark {
    --docsearch-text-color: #F3F4F6!important;
    --docsearch-container-background: rgba(9, 10, 17, 0.8)!important;
    --docsearch-modal-background: #1F2937!important;
    --docsearch-modal-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.1)!important;
    --docsearch-searchbox-background: #374151!important;
    --docsearch-searchbox-focus-background: #1F2937!important;
    --docsearch-hit-color: #E5E7EB!important;
    --docsearch-hit-background: #1F2937!important;
    --docsearch-hit-shadow: none!important;
    --docsearch-muted-color: #9CA3AF!important;
    --docsearch-footer-background: #111827!important;
}

.DocSearch-Button {
    @apply w-full m-0 h-10;
    background: var(--docsearch-searchbox-background) !important;
    border: 1px solid transparent!important;
    transition: all 0.2s ease!important;
}

.DocSearch-Button:hover {
    @apply border-primary-500 dark:border-primary-400;
    background: var(--docsearch-searchbox-focus-background) !important;
}

.DocSearch-Button-Keys {
    @apply hidden min-w-0;
}

.DocSearch-Search-Icon {
    @apply w-4 h-4;
    stroke-width: var(--docsearch-icon-stroke-width)!important;
}

.DocSearch-Button-Placeholder {
    @apply text-sm font-normal;
    color: var(--docsearch-muted-color)!important;
}

/* Modal customization */
.DocSearch-Modal {
    background: var(--docsearch-modal-background)!important;
    border: 1px solid var(--docsearch-muted-color)!important;
}

.DocSearch-Form {
    background: var(--docsearch-searchbox-background)!important;
}

.DocSearch-Input {
    color: var(--docsearch-text-color) !important;
}

.DocSearch-Hit {
    background: var(--docsearch-hit-background)!important;
}

.DocSearch-Hit[aria-selected=true] {
    background: var(--docsearch-primary-color)!important;
}

.DocSearch-Hit-source {
    color: var(--docsearch-primary-color)!important;
}

.DocSearch-Footer {
    background: var(--docsearch-modal-background)!important;
    border-top: 1px solid var(--docsearch-muted-color)!important;
}