/* 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 {
  display: block;
  width: 100%;
  height: 100%;
}

:host(.background-visible) {
  background: linear-gradient(77deg, var(--actor-scrim-background-val1, #7CACF83D) 6.99%,
        var(--actor-scrim-background-val2, #0B57D03D) 45.46%,
        var(--actor-scrim-background-val3, #1B6EF33D) 88.2%);
  cursor: not-allowed;
}


@keyframes pulse-opacity {
  0% {
    opacity: 0.6;
    animation-timing-function: cubic-bezier(0.33, 0.00, 0.67, 1.00);
  }

  33.33% {
    opacity: 0;
    animation-timing-function: linear;
  }

  66.66% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.33, 0.00, 0.67, 1.00);
  }

  100% {
    opacity: 0.6;
  }
}

#border-stroke {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  background: var(--actor-border-color, #1B6EF3);
  mask-image:
    linear-gradient(white, white),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' rx='6px' ry='6px' fill='white'/></svg>");
  mask-composite: subtract;
  mask-size:
    100% 100%,
    calc(100% - 6px) calc(100% - 6px);
  mask-position:
    0 0,
    center;
  mask-repeat: no-repeat, no-repeat;
  z-index: 15;
  pointer-events: none;
}

#border-glow {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  box-shadow:
    inset 0 0 35px 12px var(--actor-border-glow-color, #4C8DF6);
  animation: pulse-opacity 4000ms infinite;
  pointer-events: none;
  z-index: 10;
}

#magicCursor {
  opacity: 0;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform-origin: 50% 100%;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.6, 0.0, 0.4, 1.0);
}

#cursorImage {
  width: 24px;
  height: 24px;
  background-image: url('magic_cursor.svg');
  background-size: contain;
  background-repeat: no-repeat;
  filter: var(--actor-magic-cursor-filter,
    drop-shadow(2px 3px 5px rgba(79, 161, 255, 1))
    drop-shadow(-1px -1px 2px rgba(52, 107, 241, 1))
  );
  will-change: transform;
  transition: opacity 200ms ease;
}

:host(.is-resizing) #cursorImage {
  opacity: 0;
}

/*
 * Loading State Animation Specs:
 *
 * Travel Speed: 750ms per 4px (Origin to Peak).
 * Micro Holds:  100ms pause at the top and bottom.
 *
 * Keyframe percentages are derived from these durations relative to the
 * 3200ms total cycle.
 */
@keyframes loading-intro {
  from {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
  }
  to {
    transform: translateY(-4px);
  }
}

@keyframes loading-loop {
  0%,
  3.125% {
    transform: translateY(-4px);
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
  }

  50% {
    transform: translateY(4px);
    animation-timing-function: linear;
  }

  50%,
  53.125% {
    transform: translateY(4px);
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
  }

  100% {
    transform: translateY(-4px);
  }
}

/* Only apply the loading animation if the user has NOT requested
reduced motion */
@media (prefers-reduced-motion: no-preference) {
  #magicCursor.loading #cursorImage {
    animation:
      loading-intro 750ms forwards,
      loading-loop 3200ms infinite 750ms;
  }
}

@keyframes cursor-click {
  0% {
    transform: translate(var(--cursor-x), var(--cursor-y)) scale(1);
  }
  40% {
    /* Shrink and dip slightly to simulate a press */
    transform: translate(var(--cursor-x), var(--cursor-y)) scale(0.85) translateY(2px);
  }
  100% {
    transform: translate(var(--cursor-x), var(--cursor-y)) scale(1);
  }
}

.clicking {
  animation: cursor-click 400ms ease-out;
}