.modal-enter-from,
.modal-leave-to {
  .bcmsModal--overlay {
    @apply opacity-0;
  }
  .bcmsModal--inner {
    @apply opacity-0 translate-y-[10px];
  }
}

.modal-enter-active,
.modal-leave-active {
  .bcmsModal--overlay {
    @apply transition-opacity ease-linear;
  }
  .bcmsModal--inner {
    @apply ease-in;
  }
}

.fade-enter-active,
.fade-leave-active {
  @apply transition-opacity duration-300 ease-linear;
}

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

.logo-enter-active,
.logo-leave-active {
  path {
    transform: translateZ(0.1px);
    @apply translate-x-0 translate-y-0 transition-transform fill-current text-white;
    transition-timing-function: ease;
    @for $i from 1 through 4 {
      &:nth-child(#{$i}) {
        transition-delay: $i * 0.1s;
        @apply duration-500;
      }
    }
  }
}

.logo-enter-from,
.logo-leave-to {
  path {
    transform: translateZ(0.1px);
    @apply translate-y-[25px];
  }
}

.help-enter-active,
.help-leave-active {
  @apply transition-opacity duration-300 ease-linear;
}

.help-enter-from,
.help-leave-to {
  @apply opacity-0 transition-opacity duration-75 ease-linear;
}