:root {
  --instui-transition-duration: 300ms;
  --instui-transition-timing: ease-in-out;
}
/**
 * @utility transition
 * @class .instui-transition
 * @group Plugins
 * @summary Enter/exit animation CSS: put `.instui-transition` on an element and toggle a `.-<type>-<state>` class (`fade`, `scale`, or `slide-{up,down,left,right}` × `entering`/`entered`/`exiting`/`exited`) from your own JS to animate it in and out.
 * @cssproperty --instui-transition-duration — The animation duration (default `300ms`).
 * @cssproperty --instui-transition-timing — The animation timing function (default `ease-in-out`).
 * @modifier -fade-entering — The fade transition's "entering" state.
 * @modifier -fade-entered — The fade transition's "entered" state.
 * @modifier -fade-exiting — The fade transition's "exiting" state.
 * @modifier -fade-exited — The fade transition's "exited" state.
 * @modifier -scale-entering — The scale transition's "entering" state.
 * @modifier -scale-entered — The scale transition's "entered" state.
 * @modifier -scale-exiting — The scale transition's "exiting" state.
 * @modifier -scale-exited — The scale transition's "exited" state.
 * @modifier -slide-right-entering — The slide right transition's "entering" state.
 * @modifier -slide-right-entered — The slide right transition's "entered" state.
 * @modifier -slide-right-exiting — The slide right transition's "exiting" state.
 * @modifier -slide-right-exited — The slide right transition's "exited" state.
 * @modifier -slide-left-entering — The slide left transition's "entering" state.
 * @modifier -slide-left-entered — The slide left transition's "entered" state.
 * @modifier -slide-left-exiting — The slide left transition's "exiting" state.
 * @modifier -slide-left-exited — The slide left transition's "exited" state.
 * @modifier -slide-up-entering — The slide up transition's "entering" state.
 * @modifier -slide-up-entered — The slide up transition's "entered" state.
 * @modifier -slide-up-exiting — The slide up transition's "exiting" state.
 * @modifier -slide-up-exited — The slide up transition's "exited" state.
 * @modifier -slide-down-entering — The slide down transition's "entering" state.
 * @modifier -slide-down-entered — The slide down transition's "entered" state.
 * @modifier -slide-down-exiting — The slide down transition's "exiting" state.
 * @modifier -slide-down-exited — The slide down transition's "exited" state.
 * @example
 * <div class="instui-transition -fade-entered">Faded in.</div>
 */
.instui-transition { transition: opacity var(--instui-transition-duration) var(--instui-transition-timing), transform var(--instui-transition-duration) var(--instui-transition-timing); }

.instui-transition.-fade-exiting, .instui-transition.-fade-exited { opacity: 0.01; }
.instui-transition.-fade-entering, .instui-transition.-fade-entered { opacity: 1; }

.instui-transition.-scale-exiting, .instui-transition.-scale-exited { transform: scale(0.01) translate3d(0, 0, 0); opacity: 0.01; }
.instui-transition.-scale-entering, .instui-transition.-scale-entered { transform: scale(1) translate3d(0, 0, 0); opacity: 1; }

.instui-transition.-slide-right-exited, .instui-transition.-slide-left-exited, .instui-transition.-slide-up-exited, .instui-transition.-slide-down-exited { opacity: 0.01; }
.instui-transition.-slide-right-exiting, .instui-transition.-slide-right-exited { transform: translate3d(100%, 0, 0); }
.instui-transition.-slide-left-exiting, .instui-transition.-slide-left-exited { transform: translate3d(-100%, 0, 0); }
.instui-transition.-slide-up-exiting, .instui-transition.-slide-up-exited { transform: translate3d(0, -100%, 0); }
.instui-transition.-slide-down-exiting, .instui-transition.-slide-down-exited { transform: translate3d(0, 100%, 0); }
.instui-transition.-slide-right-entering, .instui-transition.-slide-left-entering, .instui-transition.-slide-up-entering, .instui-transition.-slide-down-entering,
.instui-transition.-slide-right-entered, .instui-transition.-slide-left-entered, .instui-transition.-slide-up-entered, .instui-transition.-slide-down-entered { transform: translate3d(0, 0, 0); opacity: 1; }