// # CORE TOKENS: MOTION
// This partial defines global motion tokens

// ## Registration: not exposed externally
$motion-duration-70ms: 70ms;
$motion-duration-100ms: 100ms;
$motion-duration-150ms: 150ms;
$motion-duration-250ms: 250ms;
$motion-duration-400ms: 400ms;

$motion-easing-in: cubic-bezier(0, 0, 0.35, 1);
$motion-easing-out: cubic-bezier(0.4, 0, 1, 1);
$motion-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
$motion-easing-in-elastic: cubic-bezier(0, 0, 0.2, 1.4);

// ## BASE:  properties API tokens
// - Productive: small UI, small affect transitions
$motion-productive-short: $motion-duration-70ms;
$motion-productive-medium: $motion-duration-100ms;
$motion-productive-long: $motion-duration-150ms;

// - Expressive, Layout UI, Larger affect, elements with content, feedback.
// -- Duration
$motion-expressive-short: $motion-duration-250ms;
$motion-expressive-long: $motion-duration-400ms;

// -- Timing
$motion-timing-enter: $motion-easing-in;
$motion-timing-exit: $motion-easing-out;
$motion-timing-transition: $motion-easing-in-out;
$motion-timing-emphasize: $motion-easing-in-elastic;

// ###  Common, Global: Aliases for Base API, in more specific use casing.
// - This is the layer we would like to emphasize although base layer can also be used when a case is not specified.
$expand-animation-timing: var(--motion-timing-enter);