/* Copyright 2026 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 {
  --button-height: 36px;
  --cr-focus-outline-color: var(--color-searchbox-results-icon-focused-outline);
  --duration: 1800ms;
  --fulfillment-background: #fff;
  --glif-gradient: conic-gradient(
    #3186ff00 0deg,
    #34a853ff 43deg,
    #ffd314ff 65deg,
    #ff4641ff 105deg,
    #3186ffff 144deg,
    #3186ffff 150deg,
    #3186ff00 250deg
  );
  --gradient-width: 2px;
  --input-background: #fff;
  --input-foreground: #0a0a0a;
  --standard-curve: cubic-bezier(0.4, 0, 0.2, 1);
  --text-animation-curve: cubic-bezier(0.38, 0.72, 0, 1);

  /* Energy Effect Icon Shimmer Spec Variables */
  --icon-animation-duration: 1100ms;
  --icon-rotation-start-angle: 0deg;
  --icon-rotation-end-angle: 90deg;
  --icon-rotation-curve: cubic-bezier(0.001, 0, 0, 1);

  --icon-pulse-scale-0: 1;
  --icon-pulse-scale-18: 1.2;
  --icon-pulse-scale-100: 1;
  --icon-pulse-curve-0: cubic-bezier(0.05, 1.05, 0.1, 1);
  --icon-pulse-curve-18: var(--standard-curve);

  --icon-color-curve: linear;
}

.glow-container {
  display: inline-block;
  height: var(--button-height);
  margin-left: 2px;
  position: relative;
  width: var(--button-height);
}

cr-button#entrypoint {
  width: max-content;
}

cr-button#entrypoint:focus {
  outline-offset: 0;
}

@keyframes slide-in {
  to {
    transform: translateX(0);
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

:host([glif-animation-state='spinner-only']) #description {
  opacity: 0;
}

:host([glif-animation-state='started']) #description {
  animation: slide-in 1000ms 820ms var(--text-animation-curve) forwards,
    fade-in 850ms 970ms var(--text-animation-curve) forwards;
  opacity: 0;
  transform: translateX(-12px);
}

/*
  The current animation consists of the following states:
  1. ineligible state: The state where the animation is not enabled.
  2. spinner-only state: The state where the spinner endlessly rotates.
  3. started state: The state where the transition to the fourth state starts.
  4. finished state: This is the end state, and no further animation is played.
 */
.aim-c {
  border-radius: 100%;
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.aim-gradient-outer-blur,
.aim-gradient-solid {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  animation: rotate-gradient calc(var(--duration) / 1.5) var(--standard-curve)
    infinite;
}

.aim-gradient-outer-blur:before,
.aim-gradient-solid:before {
  background: var(--glif-gradient);
  bottom: 0;
  content: '';
  height: 200%;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  scale: 2 2;
  top: -50%;
  will-change: transform, opacity;
}

.aim-gradient-outer-blur {
  filter: blur(2px);
  opacity: 0.35;
  transform: translate3d(0, 0, 0);
}

.dark .aim-gradient-outer-blur {
  filter: blur(3px);
  opacity: 0.7;
}

@keyframes rotate-gradient {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

:host([glif-animation-state='finished']) .aim-gradient-outer-blur,
:host([glif-animation-state='ineligible']) .aim-gradient-outer-blur,
:host([glif-animation-state='finished']) .aim-gradient-solid,
:host([glif-animation-state='ineligible']) .aim-gradient-solid {
  animation-play-state: paused;
  opacity: 0;
}

@keyframes fade-in-out {
  0% { opacity: 0; }
  20% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

:host([glif-animation-state='started']) .aim-gradient-outer-blur:before,
:host([glif-animation-state='started']) .aim-gradient-solid:before {
  animation: fade-in-out var(--duration) linear both;
}

@keyframes opacity-fade-in-and-stay {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

:host([glif-animation-state='spinner-only']) .aim-gradient-outer-blur:before,
:host([glif-animation-state='spinner-only']) .aim-gradient-solid:before {
  animation: opacity-fade-in-and-stay 300ms 250ms linear forwards;
}

:host([glif-animation-state='finished']) .aim-gradient-outer-blur:before,
:host([glif-animation-state='finished']) .aim-gradient-solid:before {
  opacity: 0;
}

@keyframes rotate-gradient-entry {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(540deg);
  }
}

:host([glif-animation-state='started']) .aim-gradient-outer-blur,
:host([glif-animation-state='started']) .aim-gradient-solid {
  animation-duration: var(--duration);
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-name: rotate-gradient-entry;
}

:host([glif-animation-state='spinner-only']) .aim-background {
  animation: opacity-fade-in-and-stay 300ms 150ms linear forwards;
  background-color: var(--fulfillment-background);
}

.aim-background {
  background-color: var(--input-background);
  clip-path: inset(0 0 0 0 round calc(var(--button-height) * 2));
  filter: blur(4px);
  inset: var(--gradient-width);
  position: absolute;
  will-change: background-color;
}

:host([glif-animation-state='started']) .aim-background {
  animation: background-fade var(--duration) linear both;
}

:host([glif-animation-state='finished']) .aim-background {
  opacity: 0;
}

@keyframes background-fade {
  0% { background: var(--input-background); }
  20% { background: var(--fulfillment-background); }
  50% { background: var(--fulfillment-background); }
  100% { background: var(--input-background); }
}

/* Energy Effect Icon Shimmer Animations */
:host([glif-animation-state='started'][energy-effect-animation-enabled]) #entrypointIcon,
:host([glif-animation-state='started'][energy-effect-animation-enabled]) cr-icon-button#entrypoint::part(icon) {
  --iron-icon-fill-color: currentColor;
  animation:
    icon-rotate var(--icon-animation-duration) var(--cr-composebox-entrypoint-icon-animation-delay, 0ms) var(--icon-rotation-curve),
    icon-pulse var(--icon-animation-duration) var(--cr-composebox-entrypoint-icon-animation-delay, 0ms),
    icon-color var(--icon-animation-duration) var(--cr-composebox-entrypoint-icon-animation-delay, 0ms) var(--icon-color-curve);
}

@keyframes icon-rotate {
  from {
    rotate: var(--icon-rotation-start-angle);
  }
  to {
    rotate: var(--icon-rotation-end-angle);
  }
}

@keyframes icon-pulse {
  0% {
    scale: var(--icon-pulse-scale-0);
    animation-timing-function: var(--icon-pulse-curve-0);
  }

  18% {
    scale: var(--icon-pulse-scale-18);
    animation-timing-function: var(--icon-pulse-curve-18);
  }

  100% {
    scale: var(--icon-pulse-scale-100);
  }
}

@keyframes icon-color {
  0% {
    color: var(--composebox-context-menu-entrypoint-button-color, var(--cr-button-text-color));
  }
  3% {
    color: #a6b9ff;
  }
  27% {
    color: #7f9cff;
  }
  45% {
    color: #3186ff;
  }
  88% {
    color: #3186ff;
  }
  100% {
    color: var(--composebox-context-menu-entrypoint-button-color, var(--cr-button-text-color));
  }
}

@keyframes hover-background-delay {
  to {
    --cr-hover-background-color: var(
      --color-composebox-context-entrypoint-hover-background
    );
  }
}

cr-icon-button {
  border-radius: var(--cr-composebox-entrypoint-border-radius, 50%);
}

#entrypoint {
  --composebox-favicon-border-color: #f2f2f2;
  --cr-button-disabled-text-color:
      var(--color-composebox-context-entrypoint-text-disabled);
  --cr-button-text-color: var(--color-composebox-file-chip-text);
  --cr-hover-background-color:
      var(--cr-icon-button-hover-background-color);
  --cr-icon-button-height: var(
      --cr-composebox-entrypoint-height, var(--cr-icon-button-size));
  /* Let parent ('contextual-entrypoint-and-menu') add margins around button.
   */
  --cr-icon-button-margin-start: 0;
  --cr-icon-button-width: var(
      --cr-composebox-entrypoint-width, var(--cr-icon-button-size));
  --icon-block-padding-small: 10px;
  border: initial;
  gap: 4px;
  position: relative;
  z-index: 5;
}

@media (prefers-color-scheme: dark) {
  :host([apply-context-button-background]) #entrypoint {
    --composebox-favicon-border-color: #4e5059;
  }
}

#entrypoint:not(:hover) {
  background-color:
      var(--cr-composebox-entrypoint-background-color, transparent);
}

:host([show-suggestion-label]) #entrypoint {
  gap: 16px;
}

:host([show-suggestion-label]) cr-button#entrypoint {
  color: var(
    --color-sys-on-surface-subtle, --cr-fallback-color-on-surface-subtle);
}

:host([show-suggestion-label]) #entrypoint #description {
  color: var(--color-searchbox-results-foreground);
  font-size: var(--omnibox-font-size, 14px);
  font-weight: 400;
}

:host([is-oblong-shape]) #entrypoint {
  --cr-composebox-entrypoint-width: 40px;
  border-radius: 100px;
  color: var(
    --color-sys-on-surface, --cr-fallback-color-on-surface);
  /* This line handles specific margin spacing for the oblong shape in omnibox
     and the composebox. */
  margin-inline-start: var(
    --contextual-entrypoint-oblong-margin-inline-start, 0);
}

/* Keeps the hover color on the entrypoint button while menu is open on omnibox. */
:host([apply-context-button-background].menu-open) #entrypoint {
  background-color: var(--cr-active-neutral-on-subtle-background-color);
}

:host([is-lens-searchbox_]) #entrypoint {
  --composebox-favicon-border-color: var(--color-sys-surface-container, #f2f2f2);
}

@media (prefers-color-scheme: dark) {
  :host([is-lens-searchbox_]) #entrypoint {
    --composebox-favicon-border-color: var(--color-composebox-context-entrypoint-background, #4e5059);
  }
}

:host([has-popup-focus]) #entrypoint {
  box-shadow: inset 0 0 0 2px var(--cr-focus-outline-color);
}

:host([glif-animation-state='started']) #entrypoint,
:host([glif-animation-state='spinner-only']) #entrypoint {
  --cr-hover-background-color: transparent;
  animation: hover-background-delay 0ms 1850ms linear forwards;
  --icon-block-padding-small: 8px;
}

#entrypoint:not([disabled]) {
  --cr-icon-button-fill-color: currentColor;
  color: var(--composebox-context-menu-entrypoint-button-color, var(--cr-button-text-color));
}

#entrypointPlaceholder {
  display: inline-block;
  width: 36px;
}

#description {
  display: block;
  font-size: 13px;
}

@media (forced-colors: active) {
  #entrypoint:not([disabled]) {
    --cr-button-text-color: ButtonText;
    --cr-icon-button-fill-color: ButtonText;
    color: ButtonText;
  }
  #entrypoint {
    background-color: ButtonFace;
    border: 1px solid ButtonText;
    box-sizing: border-box;
  }
}

@container style(--cr-animations-disabled: 1) {
  :host([glif-animation-state]) .aim-gradient-outer-blur,
  :host([glif-animation-state]) .aim-gradient-solid,
  :host([glif-animation-state]) .aim-background {
    display: none;
  }
  :host([glif-animation-state]) #entrypointIcon,
  :host([glif-animation-state]) cr-icon-button#entrypoint::part(icon),
  :host([glif-animation-state]) #entrypoint {
    animation: none !important;
  }
  :host([glif-animation-state]) #description {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.pill-button {
  --cr-composebox-entrypoint-background-color: var(--color-composebox-context-entrypoint-hover-background, rgba(0, 0, 0, 0.05));
  min-width: auto;
  padding: 0 10px 0 8px;
}

.pill-button cr-icon {
  width: 20px;
  height: 20px;
  margin-right: 4px;
}

.sts-active-coin {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Push to right in standard button (non-pill) */
cr-button:not(.pill-button) .sts-active-coin {
  margin-inline-start: auto;
  margin-inline-end: 10px;
}