$namespace: re-affix;
$customFade: #{$namespace}-fade;

.#{$namespace} {
  &, &-custom {
    z-index: 100;
  }

  &-custom {
    position: fixed;
    transition: transform 200ms cubic-bezier(.7, .3, .1, 1);
  }
}

.#{$customFade} {
  &-enter, &-appear {
    transform: translate(0, -100%)
  }

  &-enter-active, &-appear-active {
    transform: translate(0, 0);
  }

  &-exit {
    transform: translate(0, 0);
  }

  &-exit-active {
    transform: translate(0, -100%)
  }

  &-exit-done {
    display: none;
  }
}