:root {
  --xb-motion-duration-short-1: 50ms;
  --xb-motion-duration-short-2: 100ms;
  --xb-motion-duration-short-3: 150ms;
  --xb-motion-duration-short-4: 200ms;
  --xb-motion-duration-medium-1: 250ms;
  --xb-motion-duration-medium-2: 300ms;
  --xb-motion-duration-medium-3: 350ms;
  --xb-motion-duration-medium-4: 400ms;
  --xb-motion-duration-long-1: 450ms;
  --xb-motion-duration-long-2: 500ms;
  --xb-motion-duration-long-3: 550ms;
  --xb-motion-duration-long-4: 600ms;

  --xb-motion-easing-linear: linear;
  --xb-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --xb-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --xb-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --xb-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --xb-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --xb-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);

  --xb-motion-state: var(--xb-motion-duration-short-3) var(--xb-motion-easing-standard);
  --xb-motion-menu-open: var(--xb-motion-duration-short-4) var(--xb-motion-easing-standard-decelerate);
  --xb-motion-menu-close: var(--xb-motion-duration-short-2) var(--xb-motion-easing-standard-accelerate);
  --xb-motion-dialog-open: var(--xb-motion-duration-medium-2) var(--xb-motion-easing-emphasized-decelerate);
  --xb-motion-dialog-close: var(--xb-motion-duration-short-4) var(--xb-motion-easing-emphasized-accelerate);
  --xb-motion-drawer-open: var(--xb-motion-duration-medium-3) var(--xb-motion-easing-emphasized-decelerate);
  --xb-motion-drawer-close: var(--xb-motion-duration-medium-1) var(--xb-motion-easing-emphasized-accelerate);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --xb-motion-duration-short-1: 1ms;
    --xb-motion-duration-short-2: 1ms;
    --xb-motion-duration-short-3: 1ms;
    --xb-motion-duration-short-4: 1ms;
    --xb-motion-duration-medium-1: 1ms;
    --xb-motion-duration-medium-2: 1ms;
    --xb-motion-duration-medium-3: 1ms;
    --xb-motion-duration-medium-4: 1ms;
    --xb-motion-duration-long-1: 1ms;
    --xb-motion-duration-long-2: 1ms;
    --xb-motion-duration-long-3: 1ms;
    --xb-motion-duration-long-4: 1ms;
  }
}