/* 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
 * #scheme=relative
 * #css_wrapper_metadata_end */

@property --gradient-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@property --mask-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

:host{
  --cr-hover-background-color: #F3F5F6;
  --cr-button-height: 32px;
  flex-shrink: 0;
  /* These variables are only relevant for dynamic mode. */
  --arrow-transform-start: translateY(-50%) translateX(-10.5px);
  --arrow-transform-end: translateY(-50%) translateX(0);
  --label-transform-input: translateX(-18px);
}

:host-context([dir='rtl']) {
  /* These variables are only relevant for dynamic mode. */
  --arrow-transform-start: translateY(-50%) translateX(10.5px);
  --arrow-transform-end: translateY(-50%) translateX(0);
  --label-transform-input: translateX(18px);
}

#composeButton {
  background-color: #F3F5F6;
  color: #1F1F1F;
  font-weight: 400;
  font-family: inherit;
  font-size: inherit;
  border: none;
  position: relative;
  gap: 3px;
}

:host([has-virtual-focus]) #composeButton {
  background-color: var(--cr-hover-background-color);
  outline: 2px solid var(
      --color-searchbox-results-icon-focused-outline,
      var(--cr-focus-outline-color));
}

.compose-container {
  z-index: 100;
  position: relative;
  padding-inline-end: 12px;
  padding-inline-start: 8px;
}

.compose-icon {
  background-color: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  vertical-align: text-bottom;
  height: 18px;
  width: 18px;
  padding-top: 2px;
  padding-left: 1px;
}

.compose-icon-favicon {
  background-color: transparent;
  object-fit: contain;
  height: 16px;
  width: 16px;
  padding-top: 0;
  padding-left: 0;
}

.arrow-icon {
  background-color: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  vertical-align: text-bottom;
  display: none;
}

#glowAnimationWrapper {
  --anim-duration: 2s;
  --glif-angle-start: 99deg;
  --glif-angle-range: 318.5deg;
  --mask-angle-start: -150deg;
  --mask-angle-range: 360deg;

  --acceleration: cubic-bezier(0.4, 0, 0.2, 1);

  --glif-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
  );

  --mask-gradient: conic-gradient(
    transparent,
    16.56deg,
    273.24deg,
    transparent 333.36deg,
    transparent 360deg
  );
}

@keyframes rotate-glif-anim {
  from {
    rotate: var(--glif-angle-start);
  }
  to {
    rotate: calc(var(--glif-angle-start) + var(--glif-angle-range));
  }
}

@keyframes rotate-mask-anim {
  from {
    rotate: var(--mask-angle-start);
  }
  to {
    rotate: calc(var(--mask-angle-start) + var(--mask-angle-range));
  }
}

@keyframes rotate-glif-anim-infinite {
  from {
    rotate: var(--glif-angle-start);
  }
  to {
    rotate: calc(var(--glif-angle-start) + 360deg);
  }
}

@keyframes rotate-mask-anim-infinite {
  from {
    rotate: var(--mask-angle-start);
  }
  to {
    rotate: calc(var(--mask-angle-start) + 360deg);
  }
}

@keyframes fade-in-out {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade-in-out-infinite {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/**
 * .glow-container contains both the button and the GLIF gradients used as part
 * of the animation. There are 2 masked gradients to create the animation: one
 * outer blurred glow that extends past the button and one conal gradient that
 * sits on the border of the button.
 */
.glow-container {
  align-items: center;
  border-radius: 100px;
  display: flex;
  height: 36px;
  margin-inline-end: 8px;
  padding-inline: 2px;
  position: relative;
  top: 6px;
  z-index: var(--cr-searchbox-compose-button-z-index, 100);
}

:host([is-fusebox-enabled]) {
  --cr-button-height: 36px;
}

:host([is-fusebox-enabled]) #composeButton {
  font-size: 13px;
  font-weight: 500;
}

:host([is-fusebox-enabled]) .glow-container {
  height: var(--cr-searchbox-icon-size);
  top: 8px;
}

/* A wrapper class to hold each gradient and its mask. Don't show unless on page
 * load or on hover. */
.gradient-and-mask-wrapper {
  overflow: hidden;
  position: absolute;
  inset: 0;
  border-radius: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease-out;
}

.play .gradient-and-mask-wrapper {
  opacity: 1;
  pointer-events: auto;
}

#glowAnimationWrapper:hover .gradient-and-mask-wrapper {
  opacity: 1;
  pointer-events: auto;
}

/* The outer blurred glow. */
.outer-glow {
  filter: blur(40px);
}

:host([is-fusebox-enabled]) .outer-glow {
  filter: blur(2px);
}

#glowAnimationWrapper:hover .outer-glow {
  filter: none;
}

:host([is-fusebox-enabled]) #glowAnimationWrapper:hover .outer-glow {
  filter: blur(2px);
}

/* Containers used to position the gradient and masks correctly. The gradient
 * and masks themselves are created using pseudo-elements. */
.gradient-and-mask-wrapper .gradient,
.gradient-and-mask-wrapper .mask {
  position: absolute;
  inset: 0;
  transform-origin: center;
  translate: 0 -50%;
  top: 50%;
  scale: 1.43 0.78;
  border-radius: 50%;
  aspect-ratio: 1/1;
}

.gradient-and-mask-wrapper .gradient:before,
.gradient-and-mask-wrapper .mask:before {
  content: '';
  position: absolute;
  inset: 0;
  transform-origin: center;
}

.gradient-and-mask-wrapper .gradient:before {
  background: var(--glif-gradient);
  rotate: var(--glif-angle-start);
}

.play .gradient-and-mask-wrapper .gradient:before {
  animation: rotate-glif-anim var(--anim-duration) var(--acceleration) forwards,
             fade-in-out var(--anim-duration) linear forwards;
}

.gradient-and-mask-wrapper .mask:before {
  background: var(--mask-gradient);
  rotate: var(--mask-angle-start);
}

:host([is-fusebox-enabled]) .gradient-and-mask-wrapper .gradient:before {
  background: var(--glif-gradient);
  rotate: calc(var(--glif-angle-start) + var(--mouse-angle, 0deg));
}

:host([is-fusebox-enabled]) .play .gradient-and-mask-wrapper .gradient:before {
  animation: fade-in-out var(--anim-duration) linear forwards;
}

:host([is-fusebox-enabled]) .gradient-and-mask-wrapper .mask:before {
  background: var(--mask-gradient);
  rotate: calc(var(--mask-angle-start) + var(--mouse-angle, 0deg));
}

.play .gradient-and-mask-wrapper .mask:before {
  animation: rotate-mask-anim var(--anim-duration) var(--acceleration) forwards;
}

#glowAnimationWrapper:hover .gradient-and-mask-wrapper .mask:before {
  --anim-duration: 8s;
  animation: rotate-mask-anim-infinite var(--anim-duration) linear infinite,
             fade-in-out-infinite var(--anim-duration) linear forwards;
}

#glowAnimationWrapper:hover .gradient-and-mask-wrapper .gradient:before {
  --anim-duration: 8s;
  animation: rotate-glif-anim-infinite var(--anim-duration) linear infinite,
             fade-in-out-infinite var(--anim-duration) linear forwards;
}

:host([is-fusebox-enabled]) #glowAnimationWrapper:hover .gradient-and-mask-wrapper .mask:before {
  --anim-duration: 8s;
  animation: fade-in-out-infinite var(--anim-duration) linear forwards;
}

:host([is-fusebox-enabled])
#glowAnimationWrapper:hover
.gradient-and-mask-wrapper
.gradient:before {
  --anim-duration: 8s;
  animation: fade-in-out-infinite var(--anim-duration) linear forwards;
}

:host([energy-effect-animation-enabled]) #glowAnimationWrapper {
  --emphasized-accelerate-curve: cubic-bezier(0.3, 0, 0.8, 0.15);
  --emphasized-curve: cubic-bezier(0.38, 0.72, 0, 1);
  --emphasized-decelerate-curve: cubic-bezier(0.05, 0.7, 0.1, 1);
  --glif-gradient: conic-gradient(
    rgba(49, 134, 255, 0) 20%,
    rgba(49, 134, 255, 0.13) 34%,
    rgba(147, 120, 255, 0.19) 37%,
    rgba(249, 107, 214, 0.5) 39%,
    rgba(252, 65, 61, 0.73) 41%,
    rgba(252, 65, 61, 1) 48%,
    rgba(255, 107, 43, 1) 50%,
    rgba(254, 199, 0, 1) 52%,
    rgba(255, 219, 15, 1) 56%,
    rgba(136, 222, 66, 1) 58%,
    rgba(14, 188, 95, 1) 61%,
    rgba(14, 188, 95, 1) 65%,
    rgba(46, 170, 178, 1) 70%,
    rgba(0, 169, 187, 1) 72%,
    rgba(49, 134, 255, 0.73) 73%,
    rgba(49, 134, 255, 0) 95%
  );
  --gradient-angle-end: 233.5deg;
  --gradient-angle-start: 160deg;
  --gradient-burst-duration: 1000ms;
  --gradient-opacity: 0.6;
  --gradient-width: 1px;
  --hover-fade-duration: 400ms;
  --hover-inner-glow-duration: 1000ms;
  --intro-duration: 2000ms;
  --mask-angle-end: 267deg;
  --mask-angle-start: -110deg;
  --standard-accelerate-curve: cubic-bezier(0.3, 0, 1, 1);
  --standard-curve: cubic-bezier(0.2, 0, 0, 1);
  --standard-decelerate-curve: cubic-bezier(0, 0, 0, 1);
  --sys-motion--curve-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :host([energy-effect-animation-enabled]) #glowAnimationWrapper {
    --gradient-opacity: 0.9;
  }
}

:host([energy-effect-animation-enabled][is-dark]) #glowAnimationWrapper {
  --gradient-opacity: 0.9;
}

:host([energy-effect-animation-enabled]) .input-plate-gradient {
  position: absolute;
  inset: 2px 2px;
  border-radius: 100px;
  opacity: 0;
  will-change: opacity, --mask-angle, --gradient-angle;
  transition: opacity var(--hover-fade-duration) var(--standard-curve);
  pointer-events: none;
}

:host([energy-effect-animation-enabled]) #glowAnimationWrapper.hovering .input-plate-gradient {
  opacity: var(--gradient-opacity);
}

:host([energy-effect-animation-enabled]) .input-plate-gradient-mask {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

:host([energy-effect-animation-enabled]) .gradient-blur-wrapper {
  backface-visibility: hidden;
  border-radius: inherit;
  filter: blur(1px);
  inset: 0;
  overflow: hidden;
  position: absolute;
  transform: translateZ(0);
  transition: filter var(--hover-fade-duration) var(--standard-curve);
}

:host([energy-effect-animation-enabled]) .gradient-blur-wrapper:not(.sharp-tip) {
  filter: blur(4px);
  inset: -4px;
}

:host([energy-effect-animation-enabled]) .sharp-tip.gradient-blur-wrapper {
  filter: blur(1px);
}

:host([energy-effect-animation-enabled]) .gradient-mask {
  inset: 0;
  position: absolute;
  border-radius: inherit;
  -webkit-mask-image: conic-gradient(
    from var(--mask-angle, 0deg),
    transparent 0%,
    transparent 44%,
    black 62%,
    black 81%,
    transparent 95%,
    transparent 100%
  );
  mask-image: conic-gradient(
    from var(--mask-angle, 0deg),
    transparent 0%,
    transparent 44%,
    black 62%,
    black 81%,
    transparent 95%,
    transparent 100%
  );
  scale: 5.2 1.95;
}

:host([energy-effect-animation-enabled]) .sharp-tip .gradient-mask {
  -webkit-mask-image: conic-gradient(
    from var(--mask-angle, 0deg),
    transparent 0%,
    transparent 58%,
    black 78%,
    black 85%,
    transparent 93%,
    transparent 100%
  );
  mask-image: conic-gradient(
    from var(--mask-angle, 0deg),
    transparent 0%,
    transparent 58%,
    black 78%,
    black 85%,
    transparent 93%,
    transparent 100%
  );
}

:host([energy-effect-animation-enabled]) .gradient {
  inset: 0;
  position: absolute;
  border-radius: 50%;
  background: var(--glif-gradient);
  aspect-ratio: 1 / 1;
  translate: 0 -50%;
  inset-block-start: 50%;
  rotate: var(--gradient-angle, 0deg);
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

:host([energy-effect-animation-enabled]) #glowAnimationWrapper.play .gradient-blur-wrapper:not(.sharp-tip) {
  animation: animateBlur var(--gradient-burst-duration) linear both;
}

@keyframes animateBlur {
  0% {
    filter: blur(1px);
  }
  15% {
    filter: blur(5px);
  }
  25% {
    filter: blur(3px);
  }
  45% {
    filter: blur(5px);
  }
  100% {
    filter: blur(1px);
  }
}

:host([energy-effect-animation-enabled]) #glowAnimationWrapper.play .input-plate-gradient {
  animation:
    animateOpacity var(--gradient-burst-duration) both,
    animateAngles var(--gradient-burst-duration)
      var(--standard-decelerate-curve, cubic-bezier(0, 0, 0, 1)) both;
}

@keyframes animateOpacity {
  0% {
    animation-timing-function: var(--standard-decelerate-curve, cubic-bezier(0, 0, 0, 1));
    opacity: 0;
  }
  25% {
    opacity: var(--gradient-opacity);
  }
  50% {
    animation-timing-function: var(--emphasized-accelerate-curve, cubic-bezier(0.3, 0, 0.8, 0.15));
    opacity: var(--gradient-opacity);
  }
  100% {
    opacity: 0;
  }
}

@keyframes animateAngles {
  0% {
    --gradient-angle: var(--gradient-angle-start);
    --mask-angle: var(--mask-angle-start);
  }
  100% {
    --gradient-angle: var(--gradient-angle-end);
    --mask-angle: var(--mask-angle-end);
  }
}

:host([dynamic]) #composeButton {
  gap: 0;
}

:host([dynamic]) #label {
  display: inline-block;
  margin-inline-start: 22px; /* 18px icon + 4px gap */
  transition: transform 350ms cubic-bezier(0.05, 0.735, 0.1, 1);
}

:host([dynamic][has-user-input]) #label {
  transform: var(--label-transform-input);
  transition: transform 333ms cubic-bezier(0.05, 0.7368, 0.1, 1);
}

:host([dynamic]) .compose-icon {
  position: absolute;
  inset-inline-start: 8px;
  top: 50%;
  transform: translateY(-50%);
  scale: 1;
  transition: opacity 17ms cubic-bezier(0, 0, 1, 1) 50ms,
              scale 333ms cubic-bezier(0.05, 1.68, 0.1, 1) 50ms,
              width 350ms cubic-bezier(0.05, 0.735, 0.1, 1);
}

:host([dynamic][has-user-input]) .compose-icon {
  width: 0;
  opacity: 0;
  scale: 0.5;
  transition: opacity 17ms cubic-bezier(0, 0, 1, 1),
              scale 333ms cubic-bezier(0.05, 0.7368, 0.1, 1),
              width 333ms cubic-bezier(0.05, 0.7368, 0.1, 1);
}

:host([dynamic]) .arrow-icon {
  display: inline-block;
  height: 18px;
  width: 0;
  opacity: 0;
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: var(--arrow-transform-start);
  transition: opacity 250ms cubic-bezier(0.05, 0, 0.1, 1),
              transform 350ms cubic-bezier(0.05, 0.735, 0.1, 1),
              width 350ms cubic-bezier(0.05, 0.735, 0.1, 1);
}

:host([dynamic][has-user-input]) .arrow-icon {
  width: 18px;
  opacity: 1;
  transform: var(--arrow-transform-end);
  animation: emerge 333ms cubic-bezier(0.05, 0.7368, 0.1, 1) forwards;
  transition: none;
}

@keyframes emerge {
  from {
    width: 0;
    opacity: 0;
    transform: var(--arrow-transform-start);
  }
  to {
    width: 18px;
    opacity: 1;
    transform: var(--arrow-transform-end);
  }
}