@require '~styles/variables'
@require '~styles-lib/mixins'

vendors = official

@keyframes back-out
	25%
		opacity: 1
		transform: scale3d(1.1, 1.1, 1.1)

	100%
		opacity: 0
		transform: scale3d(0.3, 0.3, 0.3)

@keyframes back-out-left
	50%
		opacity: 0.8
		transform: translate3d(25px, 0, 0)

	100%
		opacity: 0
		transform: translate3d(-100px, 0, 0)

@keyframes back-out-right
	50%
		opacity: 0.8
		transform: translate3d(-25px, 0, 0)

	100%
		opacity: 0
		transform: translate3d(100px, 0, 0)

@keyframes back-out-up
	50%
		opacity: 0.8
		transform: translate3d(0, 25px, 0)

	100%
		opacity: 0
		transform: translate3d(0, -100px, 0)

@keyframes back-out-down
	50%
		opacity: 0.8
		transform: translate3d(0, -25px, 0)

	100%
		opacity: 0
		transform: translate3d(0, 100px, 0)

+create-animation('back', 'out')
	animation-name: back-out
	animation-duration: 400ms
	animation-timing-function: $ease-out

for direction in 'up' 'right' 'down' 'left'
	+create-animation('back', 'out', direction)
		animation-name: unquote('back-out-' + direction)
		animation-duration: 300ms
