:root:root {
  --docsearch-searchbox-background: var(--token-primary-bg-c);
  --docsearch-searchbox-height: 2.25rem;
  --docsearch-searchbox-focus-background: var(--token-primary-bg-c);

  --docsearch-key-gradient: var(--token-primary-bg-c);
  --docsearch-key-shadow: none;
}

html[data-theme='light'] {
  --docsearch-searchbox-shadow: inset 0 0 0 1px var(--c-gray-90);

  --search-keys-border-c: var(--c-gray-80);

  .DocSearch-Button {
    &:hover {
      --docsearch-searchbox-shadow: inset 0 0 0 1px var(--c-gray-70);
    }
  }
}

html[data-theme='dark'] {
  --docsearch-searchbox-shadow: inset 0 0 0 1px var(--c-gray-90);

  --search-keys-border-c: var(--c-gray-80);

  .DocSearch-Button {
    &:hover {
      --docsearch-searchbox-shadow: inset 0 0 0 1px var(--c-gray-70);
    }
  }
}

//overrides
#__docusaurus {
  [class^='searchBox_'] {
    flex-grow: 1;
    max-width: 14rem;
  }

  @media (max-width: 996px) {
    [class^='searchBox_'] {
      position: static;
      right: initial;
    }
  }

  .DocSearch-Button {
    width: 100%;
    border-radius: 8px;
    box-shadow: var(--docsearch-searchbox-shadow);

    .DocSearch-Button-Keys {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      padding: 0.125rem;
      border: 1px solid var(--search-keys-border-c);
      border-radius: 6px;

      .DocSearch-Button-Key {
        position: static;
        margin-inline-end: 0;
        padding-block-end: 0;

        width: auto;
        height: auto;

        color: var(--c-indigo-50);
        border-radius: 0;
      }
    }

    .DocSearch-Search-Icon {
      max-width: 0.875rem;
      color: var(--c-indigo-50);
    }

    .DocSearch-Button-Placeholder {
      font-weight: 500;
      font-size: 0.875rem;
      line-height: 17px;

      color: var(--c-indigo-60);

      margin-block-start: -0.125rem;
    }
  }
}
