/// Creates a spinning transition by rotating the element. The `turn` unit is used to specify how far to rotate. `1turn` is equal to a 360-degree spin. /// @param {Keyword} $state [in] - State to transition to. /// @param {Boolean} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). /// @param {Number} $amount [0.75turn] - Amount to element the element. /// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously. /// @param {Duration} $duration [null] - Length (speed) of the transition. /// @param {Keyword|Function} $timing [null] - Easing of the transition. /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. @mixin mui-spin( $state: in, $direction: cw, $amount: 0.75turn, $fade: map-get($motion-ui-settings, spin-and-fade), $duration: null, $timing: null, $delay: null ) { $spin: spin($state, $direction, $amount); @include transition-start($state) { @include transition-basics($duration, $timing, $delay); @include -mui-keyframe-get($spin, 0); @if $fade { transition-property: transform, opacity; opacity: if($state == in, 0, 1); } @else { transition-property: transform, opacity; } } @include transition-end($state) { @include -mui-keyframe-get($spin, 100); @if $fade { opacity: if($state == in, 1, 0); } } }