@theme {
  --easing: cubic-bezier(0.22, 1, 0.36, 1);

  /**
     * Animations
     */
  --animate-accordion-open: accordion-open 300ms ease-out;
  --animate-accordion-close: accordion-close 300ms ease-out;

  @keyframes accordion-open {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-close {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }

  --animate-fade-in: fade-in 550ms var(--easing);
  --animate-fade-out: fade-out 550ms var(--easing);

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

  --animate-slide-direction-in: slide-direction-in 225ms ease-out;
  --animate-slide-direction-out: slide-direction-out 125ms ease-out;

  @keyframes slide-direction-in {
    0% {
      opacity: var(--slide-opacity-out, 1);
      translate: var(--slide-direction-out-x, 0) var(--slide-direction-out-y, 0);
    }
    100% {
      opacity: var(--slide-opacity-in, 1);
      translate: var(--slide-direction-in-x, 0) var(--slide-direction-in-y, 0);
    }
  }
  @keyframes slide-direction-out {
    0% {
      opacity: var(--slide-opacity-in, 1);
      translate: var(--slide-direction-in-x, 0) var(--slide-direction-in-y, 0);
    }
    100% {
      opacity: var(--slide-opacity-out, 1);
      translate: var(--slide-direction-out-x, 0) var(--slide-direction-out-y, 0);
    }
  }

  --animate-slide-in-center: slide-in-center 550ms var(--easing);
  --animate-slide-out-center: slide-out-center 550ms var(--easing);

  /**
     * `transform: translate()` is required for `floating-ui` to
     * correctly position elements within the Dialog component.
     */
  @keyframes slide-in-center {
    0% {
      transform: translate(-50%, 50vh);
    }
    100% {
      transform: translate(-50%, -50%);
    }
  }
  @keyframes slide-out-center {
    0% {
      transform: translate(-50%, -50%);
    }
    100% {
      transform: translate(-50%, 50vh);
    }
  }

  --animate-shimmer: shimmer 2000ms ease-in-out 500ms infinite;

  @keyframes shimmer {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
    100% {
      opacity: 1;
    }
  }
}