@require '../variables'

@keyframes slideOutLeft {
  35% {
    opacity: 1;
    transform: translateX($saf-translateX-distance) translateZ(0)
  }
  100% {
    opacity: 0;
    transform: translateX($saf-translateX-distance * -10)
  }
}

slideOutLeft($duration = 1s, $delay = 0s, $fill-mode = forwards)
  animation: slideOutLeft $duration $delay $fill-mode

@keyframes slideOutRight {
  35% {
    opacity: 1;
    transform: translateX($saf-translateX-distance * -1) translateZ(0)
  }
  100% {
    opacity: 0;
    transform: translateX($saf-translateX-distance * 10)
  }
}

slideOutRight($duration = 1s, $delay = 0s, $fill-mode = forwards)
  animation: slideOutRight $duration $delay $fill-mode