/* Onboarding Button Fade Scale */
.fade-scale-enter-active,
.fade-scale-leave-active {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.fade-scale-leave-active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.fade-scale-enter-active {
  transition-delay: 0.1s;
}

.fade-scale-enter,
.fade-scale-leave-to {
  transform: scale(0.95);
  opacity: 0;
}



/* Dropdown List Animation */
.select-component {
  .list-transition-enter-active,
  .list-transition-leave-active {
    transition: opacity 0.8s ease;

    li {
      transition: opacity 0.25s cubic-bezier(0.32, 0.08, 0.24, 1), transform 0.35s cubic-bezier(0.32, 0.08, 0.24, 1);
    }
  }

  .list-transition-enter-active {
    li {
      @for $i from 1 through 20 {
        &:nth-of-type(#{$i}) {
          transition-delay: #{0.1 + $i * 0.025}s;
        }
      }
    }
  }

  @include screen-sm() {
    .list-transition-enter,
    .list-transition-leave-to {
      li {
        @for $i from 1 through 20 {
          &:nth-of-type(#{$i}) {
            transform: translateY(-20%);
            opacity: 0;
          }
        }
      }
    }
  }
}
