chromium/ash/webui/common/resources/sea_pen/sea_pen_input_query_element.html

<style include="wallpaper common cros-button-style sea-pen">
  #container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: center;
  }

  #innerContainer {
    display: flex;
    flex-direction: column;
    transition: height 300ms cubic-bezier(0, 0, 0, 1);
    width: 100%;
  }

  #inputTextArea {
    width: 100%;
  }

  #queryInput {
    --cr-input-underline-display: none;
    --cr-textarea-autogrow-max-height: 3.5lh;
    color: var(--cros-sys-on_secondary_container);
    font: var(--cros-display-6-font);
    font-weight: 400;
    margin-top: 28px;
    text-align: start;
    width: 100%;
  }

  #thumbnailsLoadingText {
    color: var(--cros-sys-on_primary_container);
    font: var(--cros-annotation-1-font);
  }

  cr-button {
    font: var(--cros-button-2-font);
    padding: 0px 12px;
  }

  #underline {
    background-image:
        linear-gradient(to right, transparent 65%, var(--cros-sys-app_base_shaded) 35%),
        linear-gradient(to right, #D7E6FF, #C7E4FF, #DCE2FF, #ECDCFB);
    background-size: 12px 3px, 100% 3px;
    border: none;
    height: 3px;
    width: 100%;
  }

  @media (prefers-color-scheme: dark) {
    #underline {
      background-image:
        linear-gradient(to right, transparent 65%, var(--cros-sys-app_base_shaded) 35%),
        linear-gradient(to right, #217BFE, #078EFB, #AC87EB, #EE4D5D);
    }
  }
</style>
<div id="container">
  <div id="inputTextArea">
    <cr-textarea id="queryInput"
        value="{{textValue_}}"
        rows=1
        has-max-height
        autogrow
        disabled="[[thumbnailsLoading_]]"
        placeholder="[[i18n('seaPenFreeformInputPlaceholder')]]"
        maxlength="[[maxTextLength_]]"
        spellcheck="false"
        on-keypress="onClickInputQuerySearchButton_"
        on-focus="onTextInputFocused_">
    </cr-textarea>
    <div id="underline"></div>
  </div>
  <div id="innerContainer">
    <template is="dom-if" if="[[shouldShowSuggestions_]]"
        on-dom-change="onSeaPenSuggestionsDomChanged_" restamp>
      <sea-pen-suggestions class="fade-in-200ms"
          on-sea-pen-suggestion-selected="onSuggestionSelected_">
      </sea-pen-suggestions>
    </template>
    <div id="searchButtons">
      <template is="dom-if" if="[[thumbnailsLoading_]]">
        <span id="thumbnailsLoadingText" aria-description="{{textValue_}}" aria-live="polite">
          [[i18n('seaPenThumbnailsLoading')]]
        </span>
      </template>
      <template is="dom-if" if="[[!thumbnailsLoading_]]" restamp>
        <cr-button
            id="inspire"
            on-click="onClickInspire_"
            on-mouseleave="stopInspireIconAnimation_"
            on-mouseenter="startInspireIconAnimation_">
          <cros-lottie-renderer
              id="inspireMeAnimation"
              slot="prefix-icon"
              asset-url="chrome://resources/ash/common/sea_pen/lightbulb_icon.json"
              loop
              dynamic
              aria-hidden>
          </cros-lottie-renderer>
          <iron-icon id="inspireIcon" icon="sea-pen:inspire" slot="prefix-icon"></iron-icon>
          <p>[[i18n('seaPenInspireMeButton')]]</p>
        </cr-button>
        <cr-button
            id="searchButton"
            class="action-button"
            on-click="onClickInputQuerySearchButton_">
          <iron-icon icon$="[[searchButtonIcon_]]" slot="prefix-icon">
          </iron-icon>
          <p>[[searchButtonText_]]</p>
        </cr-button>
      </template>
    </div>
  </div>
</div>