/* Copyright 2025 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 {
  /* TODO(b/524320143): aim_app.css has different definitions for the following
   * colors. We should reconcile these, so that all popups use the same color.
   * Requires UX input to determine which color is the correct one:
   *   - --color-composebox-context-entrypoint-background
   *   - --color-composebox-context-entrypoint-hover-background
   *   - --color-composebox-context-entrypoint-text
   *   - --composebox-context-menu-entrypoint-button-color */
  --color-composebox-context-entrypoint-background: var(--color-omnibox-action-icon-hover);
  --color-composebox-context-entrypoint-hover-background: var(--color-omnibox-action-icon-hover);
  --color-composebox-context-entrypoint-text: var(--color-omnibox-context-entrypoint-text);
  --color-composebox-document-chip-icon: var(--color-sys-on-surface-subtle);
  --color-composebox-file-carousel-divider: var(--color-omnibox-composebox-divider);
  --color-composebox-file-chip-background: var(--color-omnibox-composebox-chip-background);
  --color-composebox-file-chip-favicon-background: var(--color-omnibox-composebox-favicon-background);
  --color-composebox-file-chip-text: var(--color-omnibox-text);
  --composebox-context-menu-entrypoint-button-color: var(--color-omnibox-context-entrypoint-text);
  --cr-composebox-font-size: 14px;

  --cr-searchbox-match-icon-container-background-fallback: var(--color-omnibox-results-background-hovered);
  --color-searchbox-background: var(--color-omnibox-results-background);
  --color-searchbox-foreground: var(--color-omnibox-text);
  --color-searchbox-results-background-hovered: var(--color-omnibox-results-background-hover-overlay);
  --color-searchbox-results-background-selected: var(--color-omnibox-results-background-selected);
  --color-searchbox-results-button-hover: var(--color-omnibox-results-button-ink-drop-row-hovered);
  --color-searchbox-results-focus-indicator: var(--color-omnibox-results-focus-indicator);
  --color-searchbox-results-foreground: var(--color-omnibox-text);
  --color-searchbox-results-foreground-selected: var(--color-omnibox-results-text-selected);
  --color-searchbox-results-icon-focused-outline: var(--color-omnibox-results-focus-indicator);
  --color-searchbox-results-icon-selected: var(--color-omnibox-results-icon-selected);
  --color-searchbox-answer-icon-background: var(--color-omnibox-answer-icon-g-m3-background);
  --color-searchbox-answer-icon-foreground: var(--color-omnibox-answer-icon-g-m3-foreground);
  --color-searchbox-results-action-chip-focus-outline: var(--color-omnibox-results-focus-indicator);
  --color-searchbox-results-action-chip: var(--color-omnibox-results-button-border);
  --color-searchbox-results-action-chip-icon: var(--color-omnibox-results-button-icon);
  --color-searchbox-results-action-chip-icon-selected: var(--color-omnibox-results-button-icon-selected);
  --color-searchbox-results-background: var(--color-omnibox-results-background);
  --color-searchbox-results-button-selected-hover: var(--color-omnibox-results-button-ink-drop-row-selected);
  --color-searchbox-results-dim-selected: var(--color-omnibox-results-text-dimmed-selected);
  --color-searchbox-results-foreground-dimmed: var(--color-omnibox-results-text-dimmed);
  --color-searchbox-results-icon: var(--color-omnibox-results-icon);
  --color-searchbox-results-icon-container-background: unset;
  --color-searchbox-results-starter-pack-icon: var(--color-omnibox-results-starter-pack-icon);
  --color-searchbox-results-typed-prefix: unset;
  --color-searchbox-results-url-selected: var(--color-omnibox-results-url-selected);
  --color-searchbox-results-url: var(--color-omnibox-results-url);
  --color-searchbox-search-icon-background: var(--color-omnibox-results-icon);
  --cr-searchbox-match-text-padding-inline-start: 12px;

  /* Closely resembles the views Omnibox input font size.
   * TODO(crbug.com/450640041): Investigate webUI blink & views rendering
   * difference. */
  --omnibox-font-size: 14.3px;
  --omnibox-context-menu-container-margin-top: 2px;
}

cr-searchbox-dropdown {
  --cr-searchbox-dropdown-header-padding-inline-start: 16px;
  --cr-searchbox-icon-container-size: 28px;
  --cr-searchbox-match-font-weight: 700;
  --cr-searchbox-match-padding: 6px;
  --cr-searchbox-match-padding-inline-start: 16px;
  --cr-searchbox-match-text-padding-inline-end: 8px;
  --cr-searchbox-results-action-chip-height: 26px;
  --cr-searchbox-results-search-icon-size: 16px;
}

/**
 * Show the secondary side if it can be shown and is currently available to be
 * shown.
 */
:host([can-show-secondary-side][has-secondary-side]) cr-searchbox-dropdown {
  --cr-searchbox-secondary-side-display: block;
}

.dropdownContainer:has(omnibox-popup-contextual-entrypoint[show-context-entrypoint_]) {
  padding-bottom: 10px;
}