/* 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 {
  --input-bottom-spacing: 16px;
  --text-input-top-spacing: 24px;
  --text-input-right-spacing: 80px;
  --input-left-spacing: 24px;
  --brand-gradient: conic-gradient(
    rgba(52, 168, 82, 0) 0deg,
    rgba(52, 168, 82, 1) 38.9738deg,
    rgba(255, 211, 20, 1) 62.3678deg,
    rgba(255, 70, 65, 1) 87.0062deg,
    rgba(49, 134, 255, 1) 107.428deg,
    rgba(49, 134, 255, 0.5) 204.48deg,
    rgba(49, 134, 255, 0) 308.88deg,
    rgba(52, 168, 82, 0) 360deg
  );
  --standard-curve: cubic-bezier(0.4, 0, 0.2, 1);
  --gradient-curve: cubic-bezier(0.2, 0, 0, 1);

  --start-angle-open: 30deg;
  --end-angle-open: 245deg;
  --start-angle-submit: 200deg;
  --end-angle-submit: 330deg;

  --glow-stroke-width: 2px;

  --glif-rotation-duration: 1000ms;

  --expand-ease-in-duration: 400ms;
  --expand-delay: 300ms;
  --expand-ease-out-duration: 300ms;
  --expand-duration: calc(var(--expand-ease-in-duration) + var(--expand-delay) + var(--expand-ease-out-duration));

  --height-expand-duration: 600ms;

  border-radius: 24px;
  font-size: var(--cr-composebox-font-size, 18px);
  width: var(--ntp-composebox-width, 337px);
}

#errorScrim {
  align-items: center;
  background-color: var(--color-new-tab-page-composebox-error-scrim-background);
  border-radius: inherit;
  color: var(--color-new-tab-page-composebox-error-scrim-foreground);
  display: flex;
  font-size: 16px;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  height: 100%;
  position: absolute;
  opacity: 0.90;
  width: 100%;
  z-index: 1;
}

#errorScrim > p {
  margin: 0;
}

#dismissErrorButton {
  --cr-button-background-color:
      var(--color-new-tab-page-composebox-error-scrim-button-background);
  --cr-button-border-color:
      var(--color-new-tab-page-composebox-error-scrim-foreground);
  --cr-button-text-color:
      var(--color-new-tab-page-composebox-error-scrim-button-text);
  --cr-icon-button-hover-background-color:
      var(--color-new-tab-page-composebox-error-scrim-button-background-hover);
  border: none;
  font-size: 14px;
  gap: 4px;
  height: 44px;
  width: 122px;
}

#composebox {
  animation: var(--height-expand-duration) slide-down var(--standard-curve);
  display: flex;
  pointer-events: auto;
  position: relative;
  min-height: 136px;
  max-height: 254px;
  overflow: hidden;
}

@keyframes slide-down {
  from {
    min-height: 60px;
    max-height: 60px;
  }

  to{
    min-height: 136px;
    max-height: 136px;
  }
}

#inputContainer {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0 var(--text-input-right-spacing) var(--input-bottom-spacing) var(--input-left-spacing);
  overflow: hidden;
  width: 100%;
}

:host-context([dir='rtl']) #inputContainer {
  padding: 0 var(--input-left-spacing) var(--input-bottom-spacing) var(--text-input-right-spacing);
}

#input {
  animation: color-change 5s infinite;
  background-color: inherit;
  border: none;
  box-sizing: border-box;
  caret-color: var(--google-blue-500);
  color: var(--color-new-tab-page-composebox-font);
  display: block;
  field-sizing: content;
  font-family: inherit;
  font-size: inherit;
  line-height: 24px;
  mask-image: linear-gradient(transparent 7px, black calc(var(--text-input-top-spacing) + 7px));
  max-height: calc-size(fit-content, min(size - 24px, 190px));
  min-height: 72px;
  outline: none;
  padding: 24px 0 0;
  position: relative;
  resize: none;
  scrollbar-width: none;
  width: 100%;
}

@keyframes color-change {
  0%, 100%   { caret-color: var(--google-blue-500); }
  25% { caret-color: var(--google-red-500); }
  50%  { caret-color: var(--google-yellow-500); }
  75% { caret-color: var(--google-green-500); }
}

#input::-webkit-search-decoration,
#input::-webkit-search-results-button,
#input::-webkit-search-results-decoration,
#input::-webkit-search-cancel-button{
  display: none;
}

#uploadContainer {
  display: flex;
}

.upload-icon {
  --cr-icon-button-focus-outline-color:
      var(--color-searchbox-results-icon-focused-outline);
  --cr-icon-button-icon-size: 24px;
  --cr-icon-button-hover-background-color:
      var(--color-new-tab-page-composebox-hover);
  --cr-icon-button-size: 48px;
  animation: icon-fade-in var(--expand-duration) linear;
  color: var(--color-new-tab-page-composebox-upload-button);
  opacity: 1;
}

:host([inputs-disabled_]) .upload-icon {
  color: var(--color-new-tab-page-composebox-upload-button-disabled);
}

#imageUploadButton {
  --cr-icon-button-margin-start: -12px;
}

.action-icon {
  --cr-icon-button-focus-outline-color:
      var(--color-searchbox-results-icon-focused-outline);
  --cr-icon-button-hover-background-color:
      var(--color-new-tab-page-composebox-hover);
  --cr-icon-button-margin-end: 0;
  --cr-icon-button-size: 48px;
  animation: icon-fade-in var(--expand-duration) linear;
  opacity: 1;
  position: absolute;
  right: 16px;
}

@keyframes icon-fade-in {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
}

:host-context([dir='rtl']) .action-icon {
  left: 16px;
  right: unset;
}

#cancelIcon {
  --cr-icon-button-fill-color:
      var(--color-new-tab-page-composebox-cancel-button);
  /* SVG is size 24 with 5px of padding so actual size is 14px */
  --cr-icon-button-icon-size: 24px;
  top: 16px;
}

#submitIcon {
  --cr-icon-button-fill-color: white;
  --cr-icon-button-icon-size: 16px;
  background-color: var(--color-new-tab-page-composebox-submit-button);
  bottom: var(--input-bottom-spacing);
  cursor: default;
  opacity: 30%;
}

#submitIcon:focus-visible:focus {
  box-shadow: none;
  outline: 2px solid var(--color-searchbox-results-icon-focused-outline);
  outline-offset: 2px;
}

:host([submit-enabled_]) #submitIcon {
  cursor: pointer;
  opacity: 100%;
}

@media (forced-colors: active) {
  :host,
  .action-icon {
    border: solid var(--color-new-tab-page-composebox-outline-hcm);
  }
}

.gradient {
  border-radius: inherit;
  contain: paint;
  inset: 0;
  position: absolute;
}

.gradient.gradient-outer-glow {
  animation: blur-open var(--glif-rotation-duration)
    var(--standard-curve);
}

@keyframes blur-open {
  17% {
    filter: blur(30px);
    opacity: 17.5%
  }
}

.gradient:before {
  animation: gradient-spin-expand var(--glif-rotation-duration)
    var(--gradient-curve) forwards;
  background: var(--brand-gradient);
  border-radius: 50%;
  contain: paint;
  content: '';
  height: 900px;
  left: 50%;
  position: absolute;
  rotate: 0deg;
  scale: 1 0.4;
  top: 50%;
  translate: -50% -50%;
  opacity: 0;
  width: 900px;
}

@keyframes gradient-spin-expand {
  0% {
    opacity: 0;
    transform: rotate(var(--start-angle-open));
  }
  17% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--end-angle-open));
  }
}

:host([submitting_]) .gradient:before,
:host([submitting_]) .gradient.gradient-outer-glow:before {
  animation: gradient-spin-submit var(--glif-rotation-duration)
    var(--gradient-curve) forwards;
}

:host([submitting_]) .gradient.gradient-outer-glow {
  animation: blur-close var(--glif-rotation-duration)
    var(--gradient-curve);
}

@keyframes blur-close {
  17% {
    filter: blur(30px);
    opacity: 17.5%;
  }
}

@keyframes gradient-spin-submit {
  0% {
    opacity: 0;
    transform: rotate(var(--start-angle-submit));
  }
  17% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--end-angle-submit));
  }
}

.background {
  animation: gradient-border-width var(--glif-rotation-duration)
    var(--standard-curve);
  border: 0 solid transparent;
  border-radius: inherit;
  contain: paint;
  inset: 0;
  position: absolute;
}

@keyframes gradient-border-width {
  0% {
    border-width: 0;
  }
  17% {
    border-width: var(--glow-stroke-width);
  }
  100% {
    border-width: 0;
  }
}

.background:before {
  animation: plate-background-blur-on-expand var(--glif-rotation-duration)
      var(--standard-curve),
    color-pulse-on-expand var(--expand-duration) var(--standard-curve);
  background: var(--ntp-composebox-background-color);
  border-radius: inherit;
  content: '';
  contain: paint;
  inset: 0;
  position: absolute;
  filter: blur(0);
}

@keyframes plate-background-blur-on-expand {
  0% {
    filter: blur(0);
  }
  17% {
    filter: blur(2px);
  }
  100% {
    filter: blur(0);
  }
}

@keyframes color-pulse-on-expand {
    40% {
        background: var(--color-new-tab-page-composebox-scrim-background);
    }
    58% {
        background: var(--color-new-tab-page-composebox-scrim-background);
    }
}

:host([submitting_]) .background {
  animation: gradient-border-width-close var(--glif-rotation-duration)
    var(--standard-curve);
}

@keyframes gradient-border-width-close {
  0% {
    border-width: 0;
  }
  17% {
    border-width: var(--glow-stroke-width);
  }
  100% {
    border-width: 0;
  }
}