/* 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
 * #import=//resources/cr_elements/cr_icons_lit.css.js
 * #import=//resources/cr_components/composebox/composebox.css.js
 * #import=//resources/cr_components/composebox/composebox_shared_style.css.js
 * #scheme=relative
 * #include=cr-icons-lit composebox composebox-shared-style
 * #css_wrapper_metadata_end */

:host {
  --composebox-cancel-button-top: var(--cr-composebox-cancel-button-top, 10px);
  --contextual-entrypoint-and-carousel-context-menu-container-padding-inline-start: 0px;

  --text-input-top-spacing: 10px;
  --text-input-inline-end-spacing: 80px;
  --text-input-max-height: 190px;
  --cr-composebox-entrypoint-icon-animation-delay: 250ms;
  --cr-composebox-font-size: var(--cr-composebox-custom-font-size, 16px);
  --input-bottom-spacing: 12px;
  --ntp-composebox-carousel-padding-block-end: 2px;
  --ntp-composebox-carousel-inner-margin-block-end: 2px;
  --ntp-composebox-tool-chip-padding-block-end: 0px;
  --text-input-inline-start-spacing: var(--cr-composebox-text-input-inline-start, 18px);
  --expanded-border-radius: var(--cr-composebox-expanded-border-radius, 30px);
  border-radius: var(--expanded-border-radius);
  box-shadow: var(--cr-searchbox-shadow);
  font-size: var(--cr-composebox-font-size);
  width: var(--cr-composebox-width, 337px);
}

#composebox {
  border-radius: inherit;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: calc-size(auto, size);
  max-height: var(--cr-composebox-max-height, 422px);
  pointer-events: auto;
  position: relative;
  overflow: hidden;
}

:host(:not([is-collapsible])[should-remain-folded_]) #composebox {
  max-height: var(--cr-searchbox-height);
}

#inputContainer {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  overflow: hidden;
  width: 100%;
}

cr-composebox-input::part(cancel),
cr-composebox-submit::part(submit) {
  opacity: 1;
  transition: var(--icon-entry-transition);
}

:host([show-dropdown][searchbox-next-enabled][searchbox-layout-mode='Compact']) cr-composebox-dropdown {
  padding-bottom: 0;
  padding-top: 4px;
}

:host([searchbox-next-enabled]) #composebox {
  padding-bottom: 10px;
}

#contextEntrypoint {
  color: var(--color-searchbox-results-foreground);
  inset-inline-start: 0;
  position: absolute;
  top: 0;
}

#contextEntrypoint::part(context-menu-entrypoint-icon) {
  --cr-icon-button-icon-size: 24px;
  --cr-icon-button-margin-start: 2px;
  --cr-icon-button-size: 36px;
}

:host([glif-animation-state]:not([glif-animation-state='ineligible']))
    #contextEntrypoint::part(context-menu-entrypoint-icon) {
  --cr-icon-button-margin-start: 0;
}

#inputContainer:has(.has-tabs) #contextEntrypoint {
  inset-inline-start: unset;
  position: relative;
  top: unset;
}

#voiceSearchButton {
  --cr-icon-button-fill-color: var(--color-composebox-font-light);
  --cr-icon-button-hover-background-color: var(--color-composebox-voice-button-hover-background);
  --cr-icon-button-margin-end: 0px;
  --cr-icon-button-margin-start: 0px;
  --cr-icon-button-size: 36px;
  position: absolute;
  inset-inline-end: calc(40px + 12px); /* 40px is the submit container size */
  top: 10px;
}

@media (forced-colors: active) {
  #contextEntrypoint::part(context-menu-entrypoint-icon),
  #voiceSearchButton {
    --cr-icon-button-fill-color: ButtonText;
  }
}

#composebox[inert] {
  pointer-events: none;
}

:host([is-dragging-file]) #composebox * {
  pointer-events: none;
}

#carouselContainer {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
}

:host([show-file-carousel]) #carouselContainer,
:host([submit-enabled]) #carouselContainer {
  --contextual-entrypoint-and-carousel-context-menu-container-padding-inline-start: 8px;
  padding-block-end: var(--ntp-composebox-carousel-padding-block-end);
}

:host([show-file-carousel]:not([in-tool-mode])) #carousel {
  --context-non-top-carousel-bottom-margin: 0px;
}

/* When both attachment and tool chip/tab context are present, spacing between
 * carousel and action row container is 18px (12px carousel margin-bottom +
 * 6px container padding-top). */
:host([searchbox-next-enabled][show-file-carousel][in-tool-mode]) #carousel,
:host([searchbox-next-enabled][show-file-carousel])
    #inputContainer:has(.has-tabs) #carousel {
  --context-non-top-carousel-bottom-margin: 12px;
}

.carousel-container-inner {
  margin-block-end: var(--ntp-composebox-carousel-inner-margin-block-end);
}

#toolChipsContainer,
#voiceToolChipsContainer {
  padding-block-end: var(--ntp-composebox-tool-chip-padding-block-end);
}

:host([searchbox-next-enabled])
    #inputContainer:has(.has-tabs) #contextMenuContainer,
:host([searchbox-next-enabled]) #toolChipsContainer,
:host([searchbox-next-enabled]) #voiceToolChipsContainer {
  padding-block-end: 0;
  padding-block-start: 6px;
}

:host([submit-enabled][searchbox-next-enabled]) cr-composebox-submit::part(submit) {
  inset-inline-end: 0;
  margin-block: 12px 2px;
  margin-inline: auto 10px;
  position: relative;
}

/* Specific to the NTP. If generic voice search styling,
 * add to shared styles.
 */
:host([in-voice-search-mode]) {
  box-shadow: var(--cr-searchbox-shadow);
}

:host([in-voice-search-mode]) cr-composebox-input::part(cancel),
:host([in-voice-search-mode]) cr-composebox-submit::part(submit) {
  opacity: 0;
  transition: var(--icon-exit-transition);
}

:host-context([energy-effect-enabled_][energy-effect-variant_='energy-effect-darker-shadow']) {
  --box-shadow-energy-effect: 0 4px 18px -2px rgba(60, 64, 67, 0.20);
}

:host-context([energy-effect-enabled_][energy-effect-variant_='pre-energy-effect-with-border']) {
  --box-shadow-energy-effect: var(--cr-searchbox-shadow);
  --color-composebox-input-plate-outline: #CCCFD9;
}

:host-context([energy-effect-enabled_][energy-effect-variant_='energy-effect-fusebox']) {
  --box-shadow-energy-effect: 0 2px 6px 0 rgba(60, 64, 67, 0.16);
}

:host-context([energy-effect-enabled_]:not([energy-effect-variant_='pre-energy-effect-with-border'])) {
  --color-composebox-input-plate-outline: #DADCE0;
}

:host-context([energy-effect-enabled_]) search-animated-glow {
  inset: 0;
  z-index: -1;
}

:host-context([energy-effect-enabled_]) search-animated-glow::part(composebox-background) {
  inset: 0;
}