/* 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 */

:host {
  --gradient-mask-opacity-middle-val: 0;
  /* Ensure the flow doesn't leave this elements bounds. */
  overflow: hidden;
}

@keyframes rotateGradient {
  0% {
    /* Preserve the scale applied to blur the gradient. */
    transform: scale(1.4) rotate(0deg);
  }

  100% {
    /* Preserve the scale applied to blur the gradient. */
    transform: scale(1.4) rotate(360deg);
  }
}

@keyframes fade-out {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes shaderOpacityIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes shaderOpacityToResting {
  0% {
    --gradient-mask-opacity-middle-val: 0;
    opacity: 1;
  }
  100% {
    --gradient-mask-opacity-middle-val: 0.4;
    opacity: 0.3;
  }
}

#borderGlowContainer {
  animation: 117ms cubic-bezier(0.2, 0, 0, 1) 0ms 1 normal forwards running shaderOpacityIn,
                1016ms cubic-bezier(0.2, 0, 0, 1) 117ms 1 normal forwards running shaderOpacityToResting;
  left: 50%;
  mask-image: radial-gradient(
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, var(--gradient-mask-opacity-middle-val)) 40%,
    rgba(0, 0, 0, 1) 100%
  );
  mask-mode: alpha;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(0deg) scale(0.7);
  transform-origin: center center;
}

#gradientColorLayer {
  animation: rotateGradient 20s linear 0s infinite normal forwards running;
  background: conic-gradient(
      from 0deg at center,
      var(--gradient-blue) 0deg,
      var(--gradient-blue) 10deg,
      var(--gradient-red) 80deg,
      var(--gradient-yellow) 120deg,
      var(--gradient-green) 160deg,
      var(--gradient-blue) 200deg,
      var(--gradient-blue) 360deg
  );
  height: 100%;
  left: 0;
  position: absolute;
  /* Scale effect as a replacement for a less performant filter: blur(20px). */
  transform: scale(1.4);
  transform-origin: center center;
  top: 0;
  width: 100%;
}

:host([is-fading-in]) #borderGlowContainer {
  animation: fade-in 166ms forwards cubic-bezier(0.3, 0, 1, 1);
}

:host([is-fading-out]) #borderGlowContainer {
  animation: fade-out 166ms forwards cubic-bezier(0.3, 0, 1, 1);
}