/* Copyright 2024 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=../cr_shared_vars.css.js
 * #import=../cr_icons_lit.css.js
 * #import=../cr_shared_style_lit.css.js
 * #import=../cr_spinner_style_lit.css.js
 * #scheme=relative
 * #include=cr-shared-style-lit cr-icons-lit cr-spinner-style-lit
 * #css_wrapper_metadata_end */

:host {
  display: block;
  height: 40px;
  isolation: isolate;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
      width 150ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 44px;
}

:host([disabled]) {
  opacity: var(--cr-disabled-opacity);
}

[hidden] {
  display: none !important;
}

@media (prefers-color-scheme: light) {
  cr-icon-button {
    --cr-icon-button-fill-color: var(
        --cr-toolbar-search-field-input-icon-color,
        var(--google-grey-700));
    --cr-icon-button-focus-outline-color: var(
        --cr-toolbar-icon-button-focus-outline-color,
        var(--cr-focus-outline-color));
  }
}

@media (prefers-color-scheme: dark) {
  cr-icon-button {
    --cr-icon-button-fill-color: var(
        --cr-toolbar-search-field-input-icon-color,
        var(--google-grey-500));
  }
}

cr-icon-button {
  --cr-icon-button-fill-color: var(--cr-toolbar-search-field-icon-color,
      var(--color-toolbar-search-field-icon,
      var(--cr-secondary-text-color)));
  --cr-icon-button-size: var(--cr-toolbar-icon-container-size, 28px);
  --cr-icon-button-icon-size: 20px;
  margin: var(--cr-toolbar-icon-margin, 0);
}

#icon {
  transition: margin 150ms, opacity 200ms;
}

#prompt {
  color: var(--cr-toolbar-search-field-prompt-color,
      var(--color-toolbar-search-field-foreground-placeholder,
      var(--cr-secondary-text-color)));
  opacity: 0;
  transition: opacity 200ms;
}

@media (prefers-color-scheme: dark) {
  #prompt {
    color: var(--cr-toolbar-search-field-prompt-color, white);
  }
}

@media (prefers-color-scheme: dark) {
  #prompt {
    --cr-toolbar-search-field-prompt-opacity: 1;
    color: var(--cr-secondary-text-color, white);
  }
}

.spinner {
  --cr-spinner-color: var(--cr-toolbar-search-field-input-icon-color,
      var(--google-grey-700));
  --cr-spinner-size: var(--cr-icon-size);
  margin: 0;
  opacity: 1;
  padding: 2px;
  position: absolute;
}

@media (prefers-color-scheme: dark) {
  .spinner {
    --cr-spinner-color: var(
        --cr-toolbar-search-field-input-icon-color, white);
  }
}

/* Input field. */
#searchTerm {
  -webkit-font-smoothing: antialiased;
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  line-height: 185%;
  margin: var(--cr-toolbar-search-field-term-margin, 0);
  position: relative;
}

label {
  bottom: 0;
  cursor: var(--cr-toolbar-search-field-cursor, text);
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  white-space: nowrap;
}

:host([has-search-text]) label {
  visibility: hidden;
}

input {
  -webkit-appearance: none;
  background: transparent;
  border: none;
  caret-color: var(--cr-toolbar-search-field-input-caret-color,
      currentColor);
  color: var(--cr-toolbar-search-field-input-text-color,
      var(--color-toolbar-search-field-foreground,
      var(--cr-fallback-color-on-surface)));
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  outline: none;
  padding: 0;
  position: relative;
  width: 100%;
}

@media (prefers-color-scheme: dark) {
  input {
    color: var(--cr-toolbar-search-field-input-text-color, white);
  }
}

input[type='search']::-webkit-search-cancel-button {
  display: none;
}

:host([narrow]) {
  border-radius:
      var(--cr-toolbar-search-field-border-radius, 0);
}

/** Wide layout. */
:host(:not([narrow])) {
  background: none;
  border-radius:
      var(--cr-toolbar-search-field-border-radius, 46px);
  cursor: var(--cr-toolbar-search-field-cursor, default);
  height: 36px;
  max-width: var(--cr-toolbar-field-max-width, none);
  overflow: hidden;
  padding: 0 6px;
  position: relative;
  width: var(--cr-toolbar-field-width, 680px);
  --cr-toolbar-search-field-border-radius: 100px;
}

@media (prefers-color-scheme: dark) {
  :host(:not([narrow])) {
    background:
        var(--cr-toolbar-search-field-background, rgba(0, 0, 0, 0.22));
  }
}

#background,
#stateBackground {
  display: none;
}

:host(:not([narrow])) #background {
  background: var(--cr-toolbar-search-field-background,
      var(--color-toolbar-search-field-background,
      var(--cr-fallback-color-base-container)));
  border-radius: inherit;
  display: block;
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

:host-context([webui-refresh-2026]) {
  &:host(:not([narrow])) #background {
    background: var(--cr-toolbar-search-field-background,
        var(--color-toolbar-search-field-background,
        var(--cr-fallback-color-surface4)));
  }
}

:host([search-focused_]:not([narrow])) {
  outline: 2px solid var(--cr-focus-outline-color);
  outline-offset: 2px;
}

:host(:not([narrow])) #stateBackground {
  display: block;
  inset: 0;
  pointer-events: none;
  position: absolute;
}

:host(:hover:not([search-focused_], [narrow])) #stateBackground {
  background: var(--color-toolbar-search-field-background-hover,
      var(--cr-hover-background-color));
  z-index: 1;
}

:host(:not([narrow]):not([showing-search])) #icon {
  opacity: var(--cr-toolbar-search-field-icon-opacity, 1);
}

:host(:not([narrow])) #prompt {
  opacity: var(--cr-toolbar-search-field-prompt-opacity, 1);
}

:host([narrow]) #prompt {
  opacity: var(--cr-toolbar-search-field-narrow-mode-prompt-opacity, 0);
}

:host([narrow]:not([showing-search])) #searchTerm {
  display: none;
}

/* Search open. */
:host([showing-search][spinner-active]) #icon {
  opacity: 0;
}

:host([narrow][showing-search]) {
  width: 100%;
}

:host([narrow][showing-search]) #icon,
:host([narrow][showing-search]) .spinner {
  /* 18px to line up with the Menu icon by default. */
  margin-inline-start:
      var(--cr-toolbar-search-icon-margin-inline-start, 18px);
}

#content {
  align-items: center;
  display: flex;
  height: 100%;
  position: relative;
  z-index: 2;
}