@mixin effects-zoomin{

/**
 * ZOOM-IN
 * When hovering the main button, the child buttons grow
 * from zero to normal size.
 *
 */

  .mfb-component--tl.mfb-zoomin,
  .mfb-component--tr.mfb-zoomin{
    .mfb-component__list{
      li{
        -webkit-transform: scale(0);
                transform: scale(0);
      }
      @for $i from 1 through $number-of-child-buttons {
        $distance: $button-space * $i;
        li:nth-child( #{$i} ) {
          -webkit-transform: translateY($distance) scale(0);
                  transform: translateY($distance) scale(0);
          transition: all $slide-speed;
          // this is the delay at which the buttons *disappear*
          transition-delay: ( $number-of-child-buttons - $i ) * 0.05s;
        }
      }
    }
    &[data-mfb-toggle="hover"]:hover,
    &[data-mfb-state="open"]{
      .mfb-component__list{
        @for $i from 1 through $number-of-child-buttons {
          $distance: $button-space * $i;
          li:nth-child( #{$i} ) {
            -webkit-transform: translateY($distance) scale(1);
                    transform: translateY($distance) scale(1);
            // this is the delay at which the buttons *appear*
            transition-delay: $i * 0.05s;
          }
        }
      }
    }
  }

  .mfb-component--bl.mfb-zoomin,
  .mfb-component--br.mfb-zoomin{
    .mfb-component__list{
      li{
        -webkit-transform: scale(0);
                transform: scale(0);
      }
      @for $i from 1 through $number-of-child-buttons {
        $distance: -1 * $button-space * $i;
        li:nth-child( #{$i} ) {
          -webkit-transform: translateY($distance) scale(0);
                  transform: translateY($distance) scale(0);
          transition: all $slide-speed;
          // this is the delay at which the buttons start disappearing
          transition-delay: ( $number-of-child-buttons - $i ) * 0.05s;
        }
      }
    }
    &[data-mfb-toggle="hover"]:hover,
    &[data-mfb-state="open"]{
      .mfb-component__list{
        @for $i from 1 through $number-of-child-buttons {
          $distance: -1 * $button-space * $i;
          li:nth-child( #{$i} ) {
            -webkit-transform: translateY($distance) scale(1);
                    transform: translateY($distance) scale(1);
            // this is the delay at which the buttons appear
            transition-delay: $i * 0.05s;
          }
        }
      }
    }
  }

}