/* 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
 * #import=./omnibox_popup_shared_style.css.js
 * #include=omnibox-popup-shared-style
 * #css_wrapper_metadata_end */

:host {
  --color-file-chip-remove-button-fill: var(--color-omnibox-results-icon);
  --composebox-context-menu-entrypoint-button-color: var(--color-sys-on-surface);
  --cr-composebox-cancel-button-top: 5px;
  --cr-composebox-custom-font-size: var(--omnibox-font-size);
  --cr-composebox-expanded-border-radius: 16px;
  --cr-composebox-input-placeholder-font-size: var(--omnibox-font-size);
  --cr-composebox-match-height: 40px;
  --cr-composebox-match-icon-container-padding-inline-start: 20px;
  --cr-composebox-match-icon-size: 16px;
  --cr-composebox-match-match-padding-bottom: 0;
  --cr-composebox-match-remove-button-top: 4px;
  --cr-composebox-match-text-container-font-size: var(--omnibox-font-size);
  --cr-composebox-match-text-padding-inline-end: 4px;
  --cr-composebox-max-height: 800px;
  --cr-composebox-text-container-padding-block-start: 0;
  --cr-composebox-voice-icon-fill-color: var(--color-sys-on-surface);
  --search-animated-glif-rotation-duration: 2000ms;
}

#composebox {
  --color-composebox-background: var(--color-omnibox-results-background);
  --color-composebox-cancel-button: unset; /* Lens only */
  --color-composebox-cancel-button-light: var(--color-omnibox-text-dimmed);
  --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-tool-chip-background: var(--color-omnibox-action-icon-hover);
  --color-composebox-voice-button-hover-background: var(--color-omnibox-action-icon-hover);
  --color-composebox-context-entrypoint-text: var(--color-omnibox-context-entrypoint-text);
  --color-composebox-context-entrypoint-text-disabled: var(--color-omnibox-foreground-disabled);
  --color-composebox-file-carousel-remove-button: var(--color-omnibox-results-button-ink-drop-row-hovered);
  --color-composebox-file-chip-spinner: var(--color-omnibox-composebox-primary-action);

  /* Themed gradient hover background color for the close button in
   * cr-composebox-file-thumbnail. */
  --color-composebox-file-carousel-remove-gradient-start: var(--color-omnibox-composebox-chip-background);
  --color-composebox-file-carousel-remove-gradient-end: color-mix(
    in srgb,
    var(--color-composebox-file-carousel-remove-gradient-start),
    transparent 100%);

  --color-composebox-file-carousel-url: var(--color-omnibox-text-dimmed);
  --color-composebox-file-image-overlay: var(--color-omnibox-composebox-file-thumbnail-overlay);
  --color-composebox-file-image-overlay-icon-color: var(--color-omnibox-composebox-file-thumbnail-overlay-icon);
  --color-composebox-font: var(--color-omnibox-text);
  --color-composebox-font-light: var(--color-omnibox-text);
  --color-composebox-hover: unset; /* Lens only */
  --color-composebox-input-icon: var(--color-omnibox-results-icon);
  --color-composebox-lens-button: unset; /* Lens only */
  --color-composebox-pdf-chip-icon: var(--color-omnibox-text-dimmed);
  --color-composebox-scrim-background: unset; /* No scrim. */
  --color-composebox-submit-button-background: var(--color-omnibox-composebox-submit-button-background);
  --color-composebox-submit-button-energy: var(--color-omnibox-composebox-submit-button-energy);
  --color-composebox-submit-button-icon: var(--color-omnibox-composebox-submit-button-icon);
  --color-composebox-submit-button-hover: var(--color-omnibox-action-icon-hover);
  --color-composebox-suggestion-activity: unset; /* No activity suggestion disclaimer. */
  --color-composebox-type-ahead: var(--color-omnibox-foreground-disabled);
  --color-composebox-type-ahead-chip: var(--color-omnibox-composebox-chip-background);
  --color-composebox-upload-button: var(--omnibox-results-chip-background);
  --color-composebox-upload-button-disabled: var(--color-omnibox-foreground-disabled);
  --color-composebox-voice-search-font: var(--color-omnibox-text);
  --cr-composebox-background-color: var(--color-omnibox-results-background);
  --cr-composebox-input-placeholder-color: var(--color-omnibox-foreground-disabled);
  --cr-composebox-outline-hcm: none;
  --cr-composebox-submit-button-margin-inline-start: auto;
  --cr-composebox-submit-container-top: auto;
  --cr-composebox-suggestion-activity-bottom: 0;
  --cr-composebox-suggestion-activity-margin-top: 0;
  --cr-composebox-voice-icon-top: auto;
  position: relative;
}

:host([energy-effect-enabled_]) #composebox {
  --composebox-cancel-button-inline-end: 14px;
  --cr-composebox-padding-bottom: 8px;
  --cr-composebox-submit-border-radius: 100px;
  --cr-composebox-submit-height: 36px;
  --cr-composebox-submit-icon-offset: 0;
  --cr-composebox-submit-width: 48px;
}

#composebox[searchbox-layout-mode='Compact'],
#composebox[searchbox-layout-mode^='Tall']:not([has-allowed-inputs]) {
  --input-bottom-spacing: 14px;
  --cr-composebox-context-margin-top: -12px;
}

#composebox[searchbox-layout-mode='Compact']::part(context-menu-entrypoint-icon),
#composebox[searchbox-layout-mode^='Tall']:not([has-allowed-inputs])::part(context-menu-entrypoint-icon) {
  --cr-icon-button-icon-size: 20px;
  --cr-icon-button-size: 28px;
  left: 12px;
  top: 14px;
}

:host([energy-effect-enabled_]) #composebox::part(context-menu-entrypoint-icon) {
  --cr-composebox-entrypoint-background-color: var(--color-omnibox-composebox-context-entrypoint-background);
  --cr-composebox-entrypoint-border-radius: 100px;
  --cr-composebox-entrypoint-height: 36px;
  --cr-composebox-entrypoint-width: 48px;
  --cr-icon-button-icon-size: 20px;
}

:host([energy-effect-enabled_]) #composebox[in-tool-mode]::part(context-menu-entrypoint-icon) {
  --cr-composebox-entrypoint-background-color: transparent;
}

:host([energy-effect-animation-enabled_]) #composebox::part(context-menu-entrypoint-icon),
:host([energy-effect-animation-enabled_]) #composebox::part(entrypoint-button) {
  --button-scale-x: 1.16;
  --cr-icon-button-transition:
    var(--on-release-duration) var(--expressive-fast-curve);
  --expressive-fast-curve: cubic-bezier(0.42, 1.67, 0.21, 0.9);
  --icon-scale-x: 0.95;
  --on-press-duration: 200ms;
  --on-release-duration: 400ms;

  transform-origin: center;
  transition: transform var(--on-release-duration) var(--expressive-fast-curve);
  will-change: transform;
}

:host([energy-effect-animation-enabled_]) #composebox::part(context-menu-entrypoint-icon):active,
:host([energy-effect-animation-enabled_]) #composebox::part(entrypoint-button):active {
  --cr-icon-button-icon-size:
    calc(20px * var(--icon-scale-x));
  --cr-icon-button-transition:
    var(--on-press-duration) var(--expressive-fast-curve);

  transform: scale(var(--button-scale-x), 1);
  transition-duration: var(--on-press-duration);
}

#composebox::part(input) {
  min-height: 44px;
}

#composebox::part(voice-stop-button) {
  background-color: var(--color-sys-neutral-container);
  --cr-icon-button-fill-color: var(--color-sys-on-surface);
}

#composebox::part(context-menu-and-tools) {
  --omnibox-context-menu-container-margin-top: 0px;
  margin-top: var(--omnibox-context-menu-container-margin-top);
}

#composebox[searchbox-layout-mode='TallBottomContext']::part(context-menu-and-tools) {
  height: 40px;
}

#composebox[searchbox-layout-mode='TallBottomContext']::part(submit) {
  bottom: 10px;
}

:host([energy-effect-enabled_])
    #composebox[searchbox-layout-mode='TallBottomContext']::part(submit) {
  inset-inline-end: 8px;
}

/* Only set min height/width if it exists;
 * otherwise use existing min height/width.
 */
#composebox.has-permission-prompt::part(composebox) {
  min-height: var(--cr_composebox_minimum_height);
  min-width: var(--cr_composebox_minimum_width);
}

#composebox::part(voice-icon) {
  --cr-icon-button-fill-color: var(--cr-composebox-voice-icon-fill-color);
}

#composebox[searchbox-layout-mode='TallBottomContext']::part(voice-icon) {
  bottom: 11px;
}

:host([energy-effect-enabled_])
  #composebox[searchbox-layout-mode='TallBottomContext']::part(voice-icon) {
  bottom: 10px;
  inset-inline-end: 14px;
}

#composebox[submit-enabled][searchbox-layout-mode='TallBottomContext']:not([show-dropdown])::part(submit) {
  bottom: 6px;
}

:host([energy-effect-enabled_])
    #composebox[submit-enabled][searchbox-layout-mode='TallBottomContext']:not([show-dropdown])::part(submit) {
  bottom: 10px;
  inset-inline-end: 8px;
}

#composebox[submit-enabled][searchbox-layout-mode='TallBottomContext']::part(voice-icon) {
  inset-inline-end: calc(var(--cr-composebox-submit-container-size) + 6px);
  margin-inline-end: 6px;
}

:host([energy-effect-enabled_])
  #composebox[submit-enabled][searchbox-layout-mode='TallBottomContext']::part(voice-icon) {
  inset-inline-end: calc(var(--cr-composebox-submit-width, var(--cr-composebox-submit-container-size)) + 8px);
  margin-inline-end: 4px;
}

:host-context([dir='rtl']) #composebox[searchbox-layout-mode='Compact']::part(context-menu-entrypoint-icon),
:host-context([dir='rtl']) #composebox[searchbox-layout-mode^='Tall']:not([has-allowed-inputs])::part(context-menu-entrypoint-icon) {
  left: unset;
  right: 12px;
}

#composebox[apply-context-button-background]::part(context-menu-entrypoint-icon) {
  --cr-composebox-entrypoint-background-color: var(
    --color-omnibox-composebox-context-entrypoint-background);
  --cr-icon-button-hover-background-color: var(
      --cr-active-neutral-on-subtle-background-color);
}