@mixin effects-slidein-spring{

/**
 * SLIDE IN SPRING
 * Same as slide-in but with a springy animation.
 *
 */

  .mfb-component--tl.mfb-slidein-spring,
  .mfb-component--tr.mfb-slidein-spring{
    .mfb-component__list li{
      opacity: 0;
      transition: all $slide-speed;
      transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    @for $i from 1 through $number-of-child-buttons {
      .mfb-component__list li:nth-child( #{$i} ) {
        transition-delay: #{$i * 0.05}s;
      }
    }
    &[data-mfb-toggle="hover"]:hover,
    &[data-mfb-state="open"]{
      .mfb-component__list{
        li{
          opacity: 1;
        }
        @for $i from 1 through $number-of-child-buttons {
          $distance: $button-space * $i;
          li:nth-child( #{$i} ) {
            transition-delay: #{$i * 0.05}s;
            -webkit-transform: translateY( $distance );
                    transform: translateY( $distance ); }
        }
      }
    }
  }

  .mfb-component--bl.mfb-slidein-spring,
  .mfb-component--br.mfb-slidein-spring{
    .mfb-component__list li{
      opacity: 0;
      transition: all $slide-speed;
      transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    @for $i from 1 through $number-of-child-buttons {
      .mfb-component__list li:nth-child( #{$i} ) {
        transition-delay: #{$i * 0.05}s;
      }
    }
    &[data-mfb-toggle="hover"]:hover,
    &[data-mfb-state="open"]{
      .mfb-component__list{
        li{
          opacity: 1;
        }
        @for $i from 1 through $number-of-child-buttons {
          $distance: -1 * $button-space * $i;
          li:nth-child( #{$i} ) {
            transition-delay: #{$i * 0.05}s;
            -webkit-transform: translateY( $distance );
                    transform: translateY( $distance ); }
        }
      }
    }
  }

}