:global {
  .fade {
    &-enter,
    &-appear {
      opacity: 0;
    }

    &-enter-active {
      opacity: 1;
      transition: opacity 0.3s;
    }

    &-exit {
      opacity: 1;
    }

    &-exit-active {
      opacity: 0;
      transition: opacity 0.3s;
    }
  }

  .scale {
    &-enter,
    &-appear {
      opacity: 0;
      transform: scale(0.8);
    }

    &-enter-active,
    &-appear-active {
      opacity: 1;
      transform: scale(1);
      transition: transform 0.3s, opacity 0.3s;
    }

    &-exit {
      opacity: 1;
      transform: scale(1);
    }

    &-exit-active {
      opacity: 0;
      transform: scale(0.8);
      transition: transform 0.3s, opacity 0.3s;
    }
  }

  .slide-up {
    &-enter,
    &-appear {
      opacity: 0;
      transform: translateY(100%);
    }

    &-enter-active,
    &-appear-active {
      opacity: 1;
      transform: translateY(0);
      transition: transform 0.3s, opacity 0.3s;
    }

    &-exit {
      opacity: 1;
      transform: translateY(0);
    }

    &-exit-active {
      opacity: 0;
      transform: translateY(100%);
      transition: transform 0.3s, opacity 0.3s;
    }
  }

  .slide-down {
    &-enter,
    &-appear {
      opacity: 0;
      transform: translateY(-100%);
    }

    &-enter-active,
    &-appear-active {
      opacity: 1;
      transform: translateY(0);
      transition: transform 0.3s, opacity 0.3s;
    }

    &-exit {
      opacity: 1;
      transform: translateY(0);
    }

    &-exit-active {
      opacity: 0;
      transform: translateY(-100%);
      transition: transform 0.3s, opacity 0.3s;
    }
  }

  .slide-left {
    &-enter,
    &-appear {
      opacity: 0;
      transform: translateX(100%);
    }

    &-enter-active,
    &-appear-active {
      opacity: 1;
      transform: translateX(0);
      transition: transform 0.3s, opacity 0.3s;
    }

    &-exit {
      opacity: 1;
      transform: translateX(0);
    }

    &-exit-active {
      opacity: 0;
      transform: translateX(100%);
      transition: transform 0.3s, opacity 0.3s;
    }
  }

  .slide-right {
    &-enter,
    &-appear {
      opacity: 0;
      transform: translateX(-100%);
    }

    &-enter-active,
    &-appear-active {
      opacity: 1;
      transform: translateX(0);
      transition: transform 0.3s, opacity 0.3s;
    }

    &-exit {
      opacity: 1;
      transform: translateX(0);
    }

    &-exit-active {
      opacity: 0;
      transform: translateX(-100%);
      transition: transform 0.3s, opacity 0.3s;
    }
  }
}