/* Copyright 2026 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=style-lit
 * #scheme=relative
 * #css_wrapper_metadata_end */

:host {
  display: block;
  position: relative;
  width: 100%;
}

omnibox-everywhere-omnibox,
omnibox-everywhere-composebox {
  --cr-searchbox-height: 48px;
  --cr-searchbox-icon-left-position: 16px;
  --cr-searchbox-icon-top-position: 0;
  --cr-searchbox-min-width: 100%;

  --color-composebox-type-ahead: #5f6368;
  --color-composebox-type-ahead-chip: rgba(26, 115, 232, 0.1);
  --color-composebox-font-light: #1f1f1f;
  --color-searchbox-placeholder: var(--color-composebox-type-ahead);
  display: block;
}

:host([omnibox-popup-debug-enabled_])
    omnibox-everywhere-omnibox::part(searchbox-input) {
  /* For debugging purposes, makes it more obvious when the WebUI input is
   * showing. */
  background-color: lightgreen;
}

omnibox-everywhere-omnibox::part(dropdown-content) {
  border-radius: inherit;
}

#composebox {
  display: block;
  margin: 0;
}

#dialogAnchor {
  anchor-name: --dialog-anchor;
  inset-inline-start: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#voiceSearchDialog {
  --color-composebox-submit-button-background: var(
      --color-new-tab-page-composebox-submit-button-background, #1a73e8);
  --color-composebox-submit-button-icon: white;
  --cr-composebox-submit-border-radius: 100px;
  --cr-composebox-submit-height: 36px;
  --cr-composebox-submit-icon-offset: 0;
  --cr-composebox-submit-icon-size: 24px;
  --cr-composebox-submit-width: 48px;
  background: var(--color-composebox-background, #fff);
  border: none;
  border-radius: 28px;
  bottom: auto;
  box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25);
  font-family: inherit;
  height: 128px;
  inset-inline-start: anchor(start);
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  position-anchor: --dialog-anchor;
  top: anchor(top);
  width: anchor-size(width);
  z-index: 1000;
}

#voiceSearchDialog::backdrop {
  display: none;
}

#voiceSearchCardContainer {
  border-radius: inherit;
  height: 100%;
  position: relative;
  width: 100%;
}

/* TODO(b/540973063): Consolidate shared voice search styles across NTP and
 * Omnibox Everywhere. */
#voiceSearch {
  --composebox-cancel-button-top: 10px;
  --composebox-voice-search-top-padding: 9px;
  --voice-bottom-actions-bottom: 12px;
  --voice-bottom-actions-inset-inline-end: 12px;
  --voice-search-minimum-height: 128px;
  height: 100%;
  width: 100%;
}

#voiceSearch::part(voice-stop-button) {
  position: relative;
}

#voiceSearch::part(submit) {
  position: relative;
}

#voiceSearchGlow {
  border-radius: inherit;
  inset: 0;
  pointer-events: none;
  position: absolute;
}

#voiceSearchGlow::part(full-container-overlay) {
  min-block-size: 0;
  position: absolute;
}

#mostVisitedContainer {
  -webkit-app-region: no-drag;
  align-items: center;
  background-clip: padding-box;
  background-color: var(--color-sys-surface-container-high, #fff);
  /* Preserves 2px border width parity with omnibox-everywhere-omnibox and
   * composebox. */
  border: 2px solid transparent;
  border-radius: 28px;
  box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  min-height: 80px;
  padding: 8px 16px;
  width: 100%;
}

cr-most-visited {
  -webkit-app-region: no-drag;
  --most-visited-gap: 20px;
  --most-visited-icon-size: 48px;
  --most-visited-tile-size: 64px;
  align-items: center;
  display: flex;
  justify-content: center;
  width: max-content;
}

:host([show-voice-search-overlay_]) {
  min-height: 128px;
}

:host([show-voice-search-overlay_]) #content {
  display: none;
}

#content:has(omnibox-everywhere-omnibox[dropdown-is-visible]) #mostVisitedContainer,
#content:has(#composebox) #mostVisitedContainer,
#mostVisitedContainer:has(cr-most-visited:not([visible_])),
#mostVisitedContainer:has(cr-most-visited[hidden]) {
  display: none;
}