@mixin effects-slidein{

/**
 * SLIDE IN + FADE
 * When hovering the main button, the child buttons slide out from beneath
 * the main button while transitioning from transparent to opaque.
 *
 */

  .mfb-component--tl.mfb-slidein,
  .mfb-component--tr.mfb-slidein{
    .mfb-component__list li{
      opacity: 0;
      transition: all $slide-speed;
    }
    &[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} ) {
            -webkit-transform: translateY( $distance );
                    transform: translateY( $distance ); }
        }
      }
    }
  }

  .mfb-component--bl.mfb-slidein,
  .mfb-component--br.mfb-slidein{
    .mfb-component__list li{
      opacity: 0;
      transition: all $slide-speed;
    }
    &[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} ) { -webkit-transform: translateY( $distance );
                                         transform: translateY( $distance ); }
        }
      }
    }
  }

}