/* 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
 * #import=//resources/cr_elements/cr_icons_lit.css.js
 * #scheme=relative
 * #include=cr-icons-lit
 * #css_wrapper_metadata_end */
:host {
  /* Set these variables since cr-icons take their margin
  from these; else negative default. */
  --cr-icon-button-margin-end: 0;
  --cr-icon-button-margin-start: 0;
  --cr-composebox-submit-default-icon-size: 16px;
  --submit-timing-and-function: 100ms ease-in-out;
  --voice-search-fade-transition: opacity var(--submit-timing-and-function);
  /* Minimum height used for error modes, etc., where 'composebox_voice_search'
   * determines the composebox height. In normal voice search mode, 'search-animated-glow'
   * determines the composebox height and min-height is ignored.
   */
  --voice-search-minimum-height: 121px;
}

#container {
  align-items: flex-start;
  border-radius: var(--expanded-border-radius);
  box-sizing: border-box;
  /* Transparent so background from animated-glow shows. */
  background-color: transparent;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: var(--voice-search-minimum-height);
  overflow: hidden;
  padding: 7px 0;
  pointer-events: none;
  width: 100%;
  z-index: 4;
}

/* Must be positioned absolute in voice recording mode
 * (no error, no permission prompt open). This is so stop/submit buttons
 * can overlay the animation's container div.
 * Must have static positioning otherwise so the error and placeholder
 * voice search text change the height of voice_search and thus composebox.
 */
:host(:not([is-permission-prompt-open])) #container:not(.has-error) {
  inset: 0;
  position: absolute;
}

:host-context([energy-effect-enabled]) #container {
  box-shadow: var(--box-shadow-energy-effect);
}

#input::-webkit-scrollbar {
  display: none;
}

#input {
  background-color: transparent;
  border: none;
  flex: 1;
  font-size: var(--cr-composebox-font-size, 16px);
  height: 100%;
  /* Overflow scroll blur top/bottom. */
  mask-image: linear-gradient(to bottom,
      transparent 0,
      black 7px,
      black calc(100% - 7px),
      transparent 100%
  );
  outline: none;
  resize: none;
  transition: var(--voice-search-fade-transition);
  width: 100%;
}

#input,
#error-container {
  box-sizing: border-box;
  color: var(--color-composebox-voice-search-font, rgba(71, 71, 71, 1));
  flex-grow: 1;
  font-family: inherit;
  line-height: 24px;
  overflow-x: hidden;
  overflow-y: auto;
  /* 11px + container padding = 18 px. Parent can set var if needed. */
  padding: var(--composebox-voice-search-top-padding, 11px)
      40px 0 20px;
  pointer-events: auto;
  width: 100%;
}

#error-container {
  display: none;
  font-size: var(--cr-composebox-font-size, 18px);
}

#error-container:not([hidden]) {
  display: block;
  position: absolute;
}

#error-container a {
  color: var(--color-composebox-link);
  text-decoration: underline;
}

#closeButton {
  --cr-icon-button-fill-color:
      var(--color-composebox-voice-search-close-button, var(--color-composebox-cancel-button-light));
  --cr-icon-button-icon-size: 20px;
  --cr-icon-button-size: 36px;
  inset-inline-end: 12px;
  margin-inline-start: 16px;
  pointer-events: auto;
  position: absolute;
  top: var(--composebox-cancel-button-top, 12px);
  /* Uses the same transitions as the submit button from
   * parent so they are in sync.
   */
  transition: var(--submit-enabled-transition, 255ms);
}

#bottomActions {
  align-items: center;
  bottom: var(--voice-bottom-actions-bottom, 12px);
  display: flex;
  gap: var(--voice-bottom-actions-gap, 8px);
  inset-inline-end: var(--voice-bottom-actions-inset-inline-end, 12px);
  opacity: 1;
  pointer-events: auto;
  position: absolute;
  transition: var(--voice-search-fade-transition);
}

:host([live-transcript-enabled]) #container:not(.has-error) {
  height: auto;
  inset: auto;
  justify-content: space-between;
  padding-bottom: 12px;
  position: relative;
}

:host([live-transcript-enabled]) #input {
  box-sizing: border-box;
  flex: 0 1 auto;
  height: auto;
  max-height: var(--text-input-max-height, 190px);
  overflow-y: auto;
  padding-bottom: 0;
  padding-inline-end: 20px;
  word-break: break-word;
}

:host([live-transcript-enabled]) #bottomActions {
  align-self: flex-end;
  margin-bottom: 0;
  margin-inline-end: var(--voice-bottom-actions-inset-inline-end, 12px);
  margin-top: auto;
  position: static;
}

#stopButton {
  /* Colors are hardcoded here because Contextual Tasks and New Tab Page should not change color based on the theme. Omnibox overrides this based on theme.*/
  --cr-icon-button-fill-color: #1F1F1F;
  --cr-icon-button-icon-size: 12px;
  --cr-icon-button-size: 36px;
  background-color: #E1E3E1;
  border-radius: var(--cr-composebox-submit-border-radius, 50%);
  /* Has same height/width as submit button. */
  height: var(--cr-composebox-button-height,
      var(--cr-composebox-submit-height,
      var(--voice-search-submit-default-container-size)));
  margin: 0;
  transition: var(--submit-enabled-transition, 255ms);
  width: var(--cr-composebox-button-width,
      var(--cr-composebox-submit-width,
      var(--voice-search-submit-default-container-size)));
}

@media (prefers-color-scheme: dark) {
/* Colors are hardcoded here because Contextual Tasks and New Tab Page should not change color based on the theme. Omnibox overrides this based on theme.*/
  #stopButton {
    --cr-icon-button-fill-color: #E3E3E3;
    background-color: #444746;
  }
}

#submitButton::part(submit) {
  --cr-composebox-submit-icon-size: var(--cr-composebox-submit-default-icon-size);
  bottom: auto;
  inset-inline-end: auto;
  position: relative;
}

:host-context([in-voice-search-mode]) #submitButton::part(submit) {
  opacity: 1;
}

/* Use opacity and pointer-events to utilize fade transition
 * if error is shown.
 */
#bottomActions.hidden,
#input.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Hide submit/stop buttons (if applicable) if permission prompt is showing. */
:host(.permission-prompt-showing) #bottomActions {
  display: none;
}

/* Initial fade in for submit/stop buttons. */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#bottomActions:not(.hidden),
#input:not(.hidden) {
  animation: fade-in var(--submit-timing-and-function);
}