/*
 * Motion: Vue transition classes for TdkTransition (or a plain <Transition name="tdk-fade">),
 * and a few utility animations. Timing comes from the motion tokens. Reduced motion turns all
 * of it off in base.css, so the end state must always make sense without the animation.
 */

/* ---- Transitions: tdk-<name>-enter-from / -leave-to ---- */
.tdk-fade-enter-active,
.tdk-rise-enter-active,
.tdk-scale-enter-active,
.tdk-slide-left-enter-active,
.tdk-slide-right-enter-active,
.tdk-slide-down-enter-active {
  transition:
    opacity var(--tdk-duration-base) var(--tdk-ease-out),
    transform var(--tdk-duration-base) var(--tdk-ease-out);
}

.tdk-fade-leave-active,
.tdk-rise-leave-active,
.tdk-scale-leave-active,
.tdk-slide-left-leave-active,
.tdk-slide-right-leave-active,
.tdk-slide-down-leave-active {
  transition:
    opacity var(--tdk-duration-fast) var(--tdk-ease-in),
    transform var(--tdk-duration-fast) var(--tdk-ease-in);
}

.tdk-fade-enter-from,
.tdk-fade-leave-to {
  opacity: 0;
}

.tdk-rise-enter-from,
.tdk-rise-leave-to {
  opacity: 0;
  transform: translateY(var(--tdk-rise));
}

.tdk-scale-enter-from,
.tdk-scale-leave-to {
  opacity: 0;
  transform: scale(0.96);
}

/* slide-left enters from the right edge (drawers, toasts); slide-right from the left. */
.tdk-slide-left-enter-from,
.tdk-slide-left-leave-to {
  opacity: 0;
  transform: translateX(calc(var(--tdk-rise) * 3));
}

.tdk-slide-right-enter-from,
.tdk-slide-right-leave-to {
  opacity: 0;
  transform: translateX(calc(var(--tdk-rise) * -3));
}

.tdk-slide-down-enter-from,
.tdk-slide-down-leave-to {
  opacity: 0;
  transform: translateY(calc(var(--tdk-rise) * -1));
}

/* Collapse animates height; TdkTransition sets the pixel heights it runs between. */
.tdk-collapse-enter-active,
.tdk-collapse-leave-active {
  overflow: hidden;
  transition:
    height var(--tdk-duration-base) var(--tdk-ease-in-out),
    opacity var(--tdk-duration-base) var(--tdk-ease-in-out);
}

.tdk-collapse-enter-from,
.tdk-collapse-leave-to {
  opacity: 0;
}

/* List moves inside a TransitionGroup, so the rest of the list slides into place. */
.tdk-fade-move,
.tdk-rise-move,
.tdk-scale-move,
.tdk-slide-left-move,
.tdk-slide-right-move,
.tdk-slide-down-move {
  transition: transform var(--tdk-duration-base) var(--tdk-ease-in-out);
}

/* ---- Utilities ---- */

/* Fade and rise in on first render. Stagger siblings with style="--tdk-stagger: 2". */
.tdk-animate-in {
  animation: tdk-rise-in var(--tdk-duration-slow) var(--tdk-ease-out) both;
  animation-delay: calc(var(--tdk-stagger, 0) * 40ms);
}

/* A soft ring that pulses, for "live" dots and things that need a glance. */
.tdk-pulse {
  animation: tdk-pulse 2s var(--tdk-ease-in-out) infinite;
}

/* A brief highlight behind a value that just changed. Re-add the class (or change :key). */
.tdk-flash {
  animation: tdk-flash 1.2s var(--tdk-ease-out);
}

@keyframes tdk-rise-in {
  from {
    opacity: 0;
    transform: translateY(var(--tdk-rise));
  }
}

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

@keyframes tdk-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%, transparent);
  }
}

@keyframes tdk-flash {
  from {
    background-color: var(--tdk-color-primary-soft);
  }
}