@define refs {
  name: backY;
  top: backTop;
  down: backDown;
  bottom: backBottom;
  up: backUp;
}

@define props {
  duration: 0.5s;
}

@alga {refs.name} {
  .{refs.top}-enter-active,
  .{refs.down}-enter-active {
    ref-animation: {refs.top} {props.duration};
  }
  
  .{refs.top}-leave-active,
  .{refs.down}-leave-active {
    ref-animation: {refs.top} {props.duration} reverse;
  }
  
  @keyframes {refs.top} {
    0% {
      ref: opacity-0.7;
      ref-transform: translateY(-1200px) scale(.7);
    }
    80% {
      ref: opacity-0.7;
      ref-transform: translateY(0px) scale(.7);
    }
    100% {
      ref: opacity-1;
      ref-transform: scale(1);
    }
  }
  
  .{refs.bottom}-enter-active,
  .{refs.up}-enter-active {
    ref-animation: {refs.bottom} {props.duration};
  }
  
  .{refs.bottom}-leave-active,
  .{refs.up}-leave-active {
    ref-animation: {refs.bottom} {props.duration} reverse;
  }
  
  @keyframes {refs.bottom} {
    0% {
      ref: opacity-0.7;
      ref-transform: translateY(1200px) scale(.7);
    }
    80% {
      ref: opacity-0.7;
      ref-transform: translateY(0px) scale(.7);
    }
    100% {
      ref: opacity-1;
      ref-transform: scale(1);
    }
  }
}