.bg-enter-active,
.bg-leave-active {
  transition: background-color 0.2s ease-in-out, filter 0.2s ease-in-out;
}

.bg-enter-from,
.bg-leave-to {
  background-color: transparent !important;
  filter: blur(0px) !important;
}

.scale-enter-active {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.18s cubic-bezier(0.5, 1, 0.89, 1),
    margin 0.18s cubic-bezier(0.5, 1, 0.89, 1);
}

.scale-leave-active {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.25s cubic-bezier(0, 0.55, 0.45, 1),
    margin 0.25s cubic-bezier(0, 0.55, 0.45, 1);
}

.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.45) !important;
  margin: 0 !important;
}

/* Appear from right */
.appear-right-enter-active {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.18s cubic-bezier(0.5, 1, 0.89, 1),
    width 0.18s cubic-bezier(0.5, 1, 0.89, 1),
    padding-left 0.18s cubic-bezier(0.5, 1, 0.89, 1),
    padding-right 0.18s cubic-bezier(0.5, 1, 0.89, 1),
    margin 0.18s cubic-bezier(0.5, 1, 0.89, 1);
}

.appear-right-leave-active {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.25s cubic-bezier(0, 0.55, 0.45, 1),
    width 0.25s cubic-bezier(0, 0.55, 0.45, 1),
    padding-left 0.25s cubic-bezier(0, 0.55, 0.45, 1),
    padding-right 0.25s cubic-bezier(0, 0.55, 0.45, 1),
    margin 0.25s cubic-bezier(0, 0.55, 0.45, 1);
}

.appear-right-enter-from,
.appear-right-leave-to {
  opacity: 0 !important;
  transform: translateX(20px) !important;
  width: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}


/* Appear from left */
.appear-left-enter-active {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.18s cubic-bezier(0.5, 1, 0.89, 1),
    width 0.18s cubic-bezier(0.5, 1, 0.89, 1),
    margin 0.18s cubic-bezier(0.5, 1, 0.89, 1);
}

.appear-left-leave-active {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.25s cubic-bezier(0, 0.55, 0.45, 1),
    width 0.25s cubic-bezier(0, 0.55, 0.45, 1),
    margin 0.25s cubic-bezier(0, 0.55, 0.45, 1);
}

.appear-left-enter-from,
.appear-left-leave-to {
  opacity: 0 !important;
  transform: translateX(-20px) !important;
  width: 0 !important;
  margin: 0 !important;
}

/* Appear from top */
.appear-top-enter-active {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.18s cubic-bezier(0.5, 1, 0.89, 1),
    height 0.18s cubic-bezier(0.5, 1, 0.89, 1),
    margin 0.18s cubic-bezier(0.5, 1, 0.89, 1);
}

.appear-top-leave-active {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.25s cubic-bezier(0, 0.55, 0.45, 1),
    height 0.25s cubic-bezier(0, 0.55, 0.45, 1),
    margin 0.25s cubic-bezier(0, 0.55, 0.45, 1);
}

.appear-top-enter-from,
.appear-top-leave-to {
  opacity: 0 !important;
  transform: translateY(-20px) !important;
  height: 0 !important;
  margin: 0 !important;
}

.page-enter-active,
.page-leave-active {
  transition: all 0.050s cubic-bezier(0.5, 1, 0.89, 1);
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
  transform: translateY(20px);
  filter: grayscale(1);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s cubic-bezier(0.5, 1, 0.89, 1);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-top-enter-active,
.slide-top-leave-active {
  transition: transform 0.25s cubic-bezier(0.5, 1, 0.89, 1),
    opacity 0.25s cubic-bezier(0.5, 1, 0.89, 1),
    height 0.25s cubic-bezier(0.5, 1, 0.89, 1),
    margin 0.25s cubic-bezier(0.5, 1, 0.89, 1),
    padding 0.25s cubic-bezier(0.5, 1, 0.89, 1);
}

.slide-top-enter-from,
.slide-top-leave-to {
  opacity: 0 !important;
  transform: translateY(-20px) !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.slide-fade-enter-active {
  transition: all 100ms ease;
}

.slide-fade-leave-active {
  transition: all 100ms cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}

.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.25s cubic-bezier(0.5, 1, 0.89, 1),
    opacity 0.25s cubic-bezier(0.5, 1, 0.89, 1),
    padding 0.25s cubic-bezier(0.5, 1, 0.89, 1);
}

.slide-right-enter-from,
.slide-right-leave-to {
  opacity: 0 !important;
  transform: translateX(200px) !important;
}