Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----

/**
 * CONTENTS
 *
 * #Introduction........Naming conventions used throughout the code.
 *
 * #SETTINGS
 * Variables............Globally-available variables and config.
 *
 * #TOOLS
 * Mixins...............Useful mixins.
 *
 * #GENERIC
 * Demo styles..........Styles for demo only (consider removing these).
 *
 * #BASE
 * Raw styles.............the very basic component wrapper.
 * Modifiers..............the basic styles dependant on component placement.
 * Debuggers..............the basic styles dependant on component placement.
 *
 * #BUTTONS
 * Base..................Wrapping and constraining every button.
 * Modifiers.............Styles that depends on state and settings.
 * Animations............Main animations of the component. 
 * Debuggers.............Styles for development.
 *
 * #LABELS
 * Base..................Wrapping and constraining every label.
 * Modifiers.............styles that depends on state and settings.
 * Debuggers.............Styles for development.
 *
 * #DEVELOPMENT
 * In development........These styles are in development and not yet finalised
 * Debuggers..........helper styles and flags for development.
 */

/*------------------------------------*\
    #Introduction 
\*------------------------------------*/
/**
 * The code AND the comments use naming conventions to refer to each part of 
 * the UI put in place by this component. If you see that somewhere they are
 * not followed please consider a Pull Request. The naming conventions are:
 *
 * "Component" : the widget itself as a whole. This is the last time it will be
 *               called anything different than "component". So, stay away from 
 *               "widget", "button" or anything else when referring to the 
 *               Component in general.
 * 
 * "Main Button" : the button that is always in view. Hovering or clicking on it
 *                 will reveal the child buttons.
 *
 * "Child buttons" : if you've read the previous point you know what they are.
 *                   Did you read the previous point? :)
 *  
 * "Label(s)" : the tooltip that fades in when hovering over a button.

/*------------------------------------*\
    #SETTINGS | Variables
\*------------------------------------*/

/* COLORS ----------------------------*/

// the main/primary color
$main-color: #E40A5D;
// aka the white text
$bright-text: rgba(255, 255, 255, 0.8);

/* EFFECTS ---------------------------*/

// which effects must be made available in the css
$effects-zoomin: true;
$effects-slidein: true;
$effects-fountain: true;

/* SPEEDS ----------------------------*/

// the speed of the inflation of each button after hovering on the main button
$delay-staggering-inflate: 0.1s;
// when hovering on the main button the child buttons slide into view
$slide-speed: .5s;
// the labels disappear at this speed on mouse out
$label-hover-off: .5s;
// the labels appear at this speed on mouse over
$label-hover-on: .3s;

/* SIZES -----------------------------*/

// main button diameter
$main_button_size: 56px;
// main button diameter
$child_button_size: 56px;
// the distance of the main button from the closest corners of the screen
$border-distance: 25px;
// font-size for labels
$labels-font-size: 13px;
// top & bottom padding for the labels
$labels-padding-vertical: 4px;
// left & right padding for the labels
$labels-padding-horizontal: 10px;

/* OTHER VARIABLES -------------------*/

// how many child buttons does the component have
$number-of-child-buttons: 5;

/* IMPORT USER-DEFINED OVERRIDES -----*/


/*------------------------------------*\
    #BASE | Raw styles
\*------------------------------------*/

/**
 * The very core styling of the button.
 * These styles are shared by every instance of the button.
 * Styles placed here should NOT care about placement in the screen,
 * options chosen by the user or state of the button.
 */

.mfb-component{
  box-sizing: border-box; // A better box-sizing 
  margin: $border-distance;
  position: fixed;
  white-space: nowrap;
  z-index: 30;
  // this padding is needed really only if the element is an <ul>
  // otherwise it can probably be ditched.
  padding-left: 0;
  list-style: none;
}

// make sure that everything inside this component 
// inherits the same box-sizing
.mfb-component{
  *, *:before, *:after {
    box-sizing: inherit;
  } 
}


/*------------------------------------*\
    #BASE | Modifiers
\*------------------------------------*/
/**
 * These styles depends on the placement of the button.
 * Styles can be:
 * 1. Top-left:  modified by the " --tl " suffix.
 * 2. Top-right: modified by the " --tr " suffix.
 * 3. Bottom-left:  modified by the " --bl " suffix.
 * 4. Bottom-right: modified by the " --br " suffix.
 */

.mfb-component--tl{
  @extend .mfb-component;
  left: 0; top: 0;
}
.mfb-component--tr{
  @extend .mfb-component;  
  right: 0; top: 0;
}
.mfb-component--bl{
  @extend .mfb-component;  
  left: 0; bottom: 0;
}
.mfb-component--br{
  @extend .mfb-component;  
  right: 0; bottom: 0;
} 


/*------------------------------------*\
    #BUTTONS | Base
\*------------------------------------*/  

.mfb-component__button{
  background-color: $main-color;
  display: inline-block;
  position: relative;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
  cursor: pointer;
  outline: none;
  padding: 0;
  position: relative;
  -webkit-user-drag: none;
  font-weight: bold; 
  color: #f1f1f1;       
}

/**
 * This is the unordered list for the list items that contain 
 * the child buttons.
 *
 */ 
.mfb-component__list{
  list-style: none;
  margin: 0;
  padding: 0;
  &>li{
    display: block;
    position: absolute;
    top: 0;

    padding: 10px 0;
    margin: -10px 0;    
  }
}

/**
 * This is the basic styles for all the icons inside the main button
 */ 
.mfb-component__icon{
  position: absolute;
  font-size: 18px;
  text-align: center;
  line-height: 56px;
  width: 100%;   
}

.mfb-component__wrap{
  // this double declaration adds some padding to the main button
  // to expand the area that triggers the hover state. The equal, negative
  // margin evens out the distance form the borders so that the button
  // does not shift out of position.
  padding: $border-distance;
  margin: -$border-distance;
}

[data-mfb-hover]:hover,
[data-mfb-state="open"]{
  .mfb-component__icon {
    -webkit-transform: scale(1) rotate(0deg);    
    transform: scale(1) rotate(0deg);    
  }
}


/*------------------------------------*\
    #BUTTONS | Modifiers
\*------------------------------------*/  

.mfb-component__button--main{
  @extend .mfb-component__button;
  height: $main_button_size;
  width: $main_button_size;  
  z-index: 20;
}
.mfb-component__button--child{
  @extend .mfb-component__button;
  height: $child_button_size;
  width: $child_button_size;  
}
// the icons for the main button
.mfb-component__main-icon--active,
.mfb-component__main-icon--resting{
  @extend .mfb-component__icon;  
  -webkit-transform: scale(1) rotate(360deg);
          transform: scale(1) rotate(360deg);
  -webkit-transition: -webkit-transform 150ms cubic-bezier(.4,0,1,1);
          transition: transform 150ms cubic-bezier(.4,0,1,1);   
}
// the icons for the main button
.mfb-component__child-icon,
.mfb-component__child-icon{
  @extend .mfb-component__icon;  
}
.mfb-component__main-icon--active{
  opacity: 0;
}
[data-mfb-hover]:hover,
[data-mfb-state="open"]{
  .mfb-component__main-icon{
    -webkit-transform: scale(1) rotate(0deg);    
    transform: scale(1) rotate(0deg);    
  }
  .mfb-component__main-icon--resting{
    opacity: 0;
  }
  .mfb-component__main-icon--active{
    opacity: 1;
  }
}

/*------------------------------------*\
    #BUTTONS | Animations
\*------------------------------------*/ 

@mixin effects-fountain{

/**
 * FOUNTAIN
 * When hovering the main button the child buttons
 * jump into view from outside the viewport
 */

  .mfb-component--tl.mfb-fountain,
  .mfb-component--tr.mfb-fountain{
    .mfb-component__list{
      li{
        -webkit-transform: scale(0);
        transform: scale(0);
      }
      @for $i from 1 through $number-of-child-buttons {
        $distance: -70px * $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-hover]:hover,
    &[data-mfb-state="open"]{
      .mfb-component__list{
        @for $i from 1 through $number-of-child-buttons {
          $distance: 70px * $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-fountain,
  .mfb-component--br.mfb-fountain{
    .mfb-component__list{
      li{
        -webkit-transform: scale(0);
                transform: scale(0);
      }
      @for $i from 1 through $number-of-child-buttons {
        $distance: 70px * $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-hover]:hover,
    &[data-mfb-state="open"]{
      .mfb-component__list{
        @for $i from 1 through $number-of-child-buttons {
          $distance: -70px * $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;
          }          
        }                
      }
    }
  }

}

@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-hover]:hover,
    &[data-mfb-state="open"]{
      .mfb-component__list{
        li{
          opacity: 1;         
        }
        @for $i from 1 through $number-of-child-buttons {
          $distance: 70px * $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-hover]:hover,
    &[data-mfb-state="open"]{
      .mfb-component__list{
        li{
          opacity: 1;         
        }
        @for $i from 1 through $number-of-child-buttons {
          $distance: -70px * $i;
          li:nth-child( #{$i} ) { -webkit-transform: translateY( $distance ); 
                                         transform: translateY( $distance ); }          
        }                
      }
    }
  }

}


@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: 70px * $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-hover]:hover,
    &[data-mfb-state="open"]{
      .mfb-component__list{
        @for $i from 1 through $number-of-child-buttons {
          $distance: 70px * $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: -70px * $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-hover]:hover,
    &[data-mfb-state="open"]{
      .mfb-component__list{
        @for $i from 1 through $number-of-child-buttons {
          $distance: -70px * $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;
          }          
        }                
      }
    }
  }

}


// Ugly work-around for this https://github.com/sass/sass/issues/451
@if $effects-slidein == true {
  @include effects-slidein;
}
@if $effects-zoomin == true {
  @include effects-zoomin;
}
@if $effects-fountain == true {
  @include effects-fountain;
}

/*------------------------------------*\
    #LABELS | base
\*------------------------------------*/

/**
 * These are the labels associated to each button,
 * exposed only when hovering the related button.
 * They are called labels but are in fact data-attributes of
 * each button (an anchor tag).
 */

[data-mfb-label]:after {
  content: attr(data-mfb-label);
  opacity: 0;
  transition: all $label-hover-off;  
  background: rgba(0,0,0, .4);
  padding: $labels-padding-vertical $labels-padding-horizontal;
  border-radius: 3px;
  color: $bright-text;
  font-size: $labels-font-size;
  pointer-events: none;
  position: absolute;
  top: 50%;
  margin-top: - ($labels-padding-vertical + $labels-font-size / 2);  
  transition: all $label-hover-off; // the label disappears at this speed     
}
[data-mfb-hover] [data-mfb-label]:hover:after,
[data-mfb-state="open"] [data-mfb-label]:after{
  content: attr(data-mfb-label);
  opacity: 1;
  transition: all $label-hover-on; // the label appears at this speed
}
/*------------------------------------*\
    #LABELS | Modifiers
\*------------------------------------*/
.mfb-component--br, .mfb-component--tr{
  [data-mfb-label]:after {
    content: attr(data-mfb-label);  
    right: 70px; 
  }
}
.mfb-component--tl, .mfb-component--bl{
  [data-mfb-label]:after {
    content: attr(data-mfb-label);  
    left: 70px; 
  }
}

/*------------------------------------*\
    #DEVELOPMENT | In development
\*------------------------------------*/
/**
 * This part is where unfinished code should stay.
 * When a feature is ready(sh) move these styles to their proper place.
 */



/*------------------------------------*\
    #DEVELOPMENT | Debuggers
\*------------------------------------*/

/**
 * These are mainly helpers for development. They do not have to end up
 * in production but it's handy to keep them when developing.
 */


/**
 * Apply this class to the html tag when developing the slide-in button
 */
html.mfb-slide-in{
  border-top: 5px solid teal; 
}

html.mfb-debug *{
  border: 1px solid red;
}

SassMeister-output.css

/**
 * CONTENTS
 *
 * #Introduction........Naming conventions used throughout the code.
 *
 * #SETTINGS
 * Variables............Globally-available variables and config.
 *
 * #TOOLS
 * Mixins...............Useful mixins.
 *
 * #GENERIC
 * Demo styles..........Styles for demo only (consider removing these).
 *
 * #BASE
 * Raw styles.............the very basic component wrapper.
 * Modifiers..............the basic styles dependant on component placement.
 * Debuggers..............the basic styles dependant on component placement.
 *
 * #BUTTONS
 * Base..................Wrapping and constraining every button.
 * Modifiers.............Styles that depends on state and settings.
 * Animations............Main animations of the component. 
 * Debuggers.............Styles for development.
 *
 * #LABELS
 * Base..................Wrapping and constraining every label.
 * Modifiers.............styles that depends on state and settings.
 * Debuggers.............Styles for development.
 *
 * #DEVELOPMENT
 * In development........These styles are in development and not yet finalised
 * Debuggers..........helper styles and flags for development.
 */
/*------------------------------------*\
    #Introduction 
\*------------------------------------*/
/**
 * The code AND the comments use naming conventions to refer to each part of 
 * the UI put in place by this component. If you see that somewhere they are
 * not followed please consider a Pull Request. The naming conventions are:
 *
 * "Component" : the widget itself as a whole. This is the last time it will be
 *               called anything different than "component". So, stay away from 
 *               "widget", "button" or anything else when referring to the 
 *               Component in general.
 * 
 * "Main Button" : the button that is always in view. Hovering or clicking on it
 *                 will reveal the child buttons.
 *
 * "Child buttons" : if you've read the previous point you know what they are.
 *                   Did you read the previous point? :)
 *  
 * "Label(s)" : the tooltip that fades in when hovering over a button.

/*------------------------------------*\
    #SETTINGS | Variables
\*------------------------------------*/
/* COLORS ----------------------------*/
/* EFFECTS ---------------------------*/
/* SPEEDS ----------------------------*/
/* SIZES -----------------------------*/
/* OTHER VARIABLES -------------------*/
/* IMPORT USER-DEFINED OVERRIDES -----*/
/*------------------------------------*\
    #BASE | Raw styles
\*------------------------------------*/
/**
 * The very core styling of the button.
 * These styles are shared by every instance of the button.
 * Styles placed here should NOT care about placement in the screen,
 * options chosen by the user or state of the button.
 */
.mfb-component, .mfb-component--tl, .mfb-component--tr, .mfb-component--bl, .mfb-component--br {
  box-sizing: border-box;
  margin: 25px;
  position: fixed;
  white-space: nowrap;
  z-index: 30;
  padding-left: 0;
  list-style: none;
}

.mfb-component *, .mfb-component--tl *, .mfb-component--tr *, .mfb-component--bl *, .mfb-component--br *, .mfb-component *:before, .mfb-component--tl *:before, .mfb-component--tr *:before, .mfb-component--bl *:before, .mfb-component--br *:before, .mfb-component *:after, .mfb-component--tl *:after, .mfb-component--tr *:after, .mfb-component--bl *:after, .mfb-component--br *:after {
  box-sizing: inherit;
}

/*------------------------------------*\
    #BASE | Modifiers
\*------------------------------------*/
/**
 * These styles depends on the placement of the button.
 * Styles can be:
 * 1. Top-left:  modified by the " --tl " suffix.
 * 2. Top-right: modified by the " --tr " suffix.
 * 3. Bottom-left:  modified by the " --bl " suffix.
 * 4. Bottom-right: modified by the " --br " suffix.
 */
.mfb-component--tl {
  left: 0;
  top: 0;
}

.mfb-component--tr {
  right: 0;
  top: 0;
}

.mfb-component--bl {
  left: 0;
  bottom: 0;
}

.mfb-component--br {
  right: 0;
  bottom: 0;
}

/*------------------------------------*\
    #BUTTONS | Base
\*------------------------------------*/
.mfb-component__button, .mfb-component__button--main, .mfb-component__button--child {
  background-color: #E40A5D;
  display: inline-block;
  position: relative;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  outline: none;
  padding: 0;
  position: relative;
  -webkit-user-drag: none;
  font-weight: bold;
  color: #f1f1f1;
}

/**
 * This is the unordered list for the list items that contain 
 * the child buttons.
 *
 */
.mfb-component__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mfb-component__list > li {
  display: block;
  position: absolute;
  top: 0;
  padding: 10px 0;
  margin: -10px 0;
}

/**
 * This is the basic styles for all the icons inside the main button
 */
.mfb-component__icon, .mfb-component__main-icon--active,
.mfb-component__main-icon--resting, .mfb-component__child-icon {
  position: absolute;
  font-size: 18px;
  text-align: center;
  line-height: 56px;
  width: 100%;
}

.mfb-component__wrap {
  padding: 25px;
  margin: -25px;
}

[data-mfb-hover]:hover .mfb-component__icon, [data-mfb-hover]:hover .mfb-component__main-icon--active,
[data-mfb-hover]:hover .mfb-component__main-icon--resting, [data-mfb-hover]:hover .mfb-component__child-icon,
[data-mfb-state="open"] .mfb-component__icon,
[data-mfb-state="open"] .mfb-component__main-icon--active,
[data-mfb-state="open"] .mfb-component__main-icon--resting,
[data-mfb-state="open"] .mfb-component__child-icon {
  -webkit-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
}

/*------------------------------------*\
    #BUTTONS | Modifiers
\*------------------------------------*/
.mfb-component__button--main {
  height: 56px;
  width: 56px;
  z-index: 20;
}

.mfb-component__button--child {
  height: 56px;
  width: 56px;
}

.mfb-component__main-icon--active,
.mfb-component__main-icon--resting {
  -webkit-transform: scale(1) rotate(360deg);
  transform: scale(1) rotate(360deg);
  -webkit-transition: -webkit-transform 150ms cubic-bezier(0.4, 0, 1, 1);
  transition: transform 150ms cubic-bezier(0.4, 0, 1, 1);
}

.mfb-component__main-icon--active {
  opacity: 0;
}

[data-mfb-hover]:hover .mfb-component__main-icon,
[data-mfb-state="open"] .mfb-component__main-icon {
  -webkit-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
}
[data-mfb-hover]:hover .mfb-component__main-icon--resting,
[data-mfb-state="open"] .mfb-component__main-icon--resting {
  opacity: 0;
}
[data-mfb-hover]:hover .mfb-component__main-icon--active,
[data-mfb-state="open"] .mfb-component__main-icon--active {
  opacity: 1;
}

/*------------------------------------*\
    #BUTTONS | Animations
\*------------------------------------*/
/**
 * 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__list li,
.mfb-component--tr.mfb-slidein .mfb-component__list li {
  opacity: 0;
  transition: all 0.5s;
}
.mfb-component--tl.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li, .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li,
.mfb-component--tr.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li,
.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li {
  opacity: 1;
}
.mfb-component--tl.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(70px);
  transform: translateY(70px);
}
.mfb-component--tl.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(140px);
  transform: translateY(140px);
}
.mfb-component--tl.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(210px);
  transform: translateY(210px);
}
.mfb-component--tl.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(280px);
  transform: translateY(280px);
}
.mfb-component--tl.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(5), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(5),
.mfb-component--tr.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(5),
.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(5) {
  -webkit-transform: translateY(350px);
  transform: translateY(350px);
}

.mfb-component--bl.mfb-slidein .mfb-component__list li,
.mfb-component--br.mfb-slidein .mfb-component__list li {
  opacity: 0;
  transition: all 0.5s;
}
.mfb-component--bl.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li, .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li,
.mfb-component--br.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li,
.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li {
  opacity: 1;
}
.mfb-component--bl.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(-70px);
  transform: translateY(-70px);
}
.mfb-component--bl.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(-140px);
  transform: translateY(-140px);
}
.mfb-component--bl.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(-210px);
  transform: translateY(-210px);
}
.mfb-component--bl.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(-280px);
  transform: translateY(-280px);
}
.mfb-component--bl.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(5), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(5),
.mfb-component--br.mfb-slidein[data-mfb-hover]:hover .mfb-component__list li:nth-child(5),
.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(5) {
  -webkit-transform: translateY(-350px);
  transform: translateY(-350px);
}

/**
 * ZOOM-IN
 * When hovering the main button, the child buttons grow
 * from zero to normal size.
 *
 */
.mfb-component--tl.mfb-zoomin .mfb-component__list li,
.mfb-component--tr.mfb-zoomin .mfb-component__list li {
  -webkit-transform: scale(0);
  transform: scale(0);
}
.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(70px) scale(0);
  transform: translateY(70px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.2s;
}
.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(140px) scale(0);
  transform: translateY(140px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.15s;
}
.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(210px) scale(0);
  transform: translateY(210px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.1s;
}
.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(280px) scale(0);
  transform: translateY(280px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.05s;
}
.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(5),
.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(5) {
  -webkit-transform: translateY(350px) scale(0);
  transform: translateY(350px) scale(0);
  transition: all 0.5s;
  transition-delay: 0s;
}
.mfb-component--tl.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(70px) scale(1);
  transform: translateY(70px) scale(1);
  transition-delay: 0.05s;
}
.mfb-component--tl.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(140px) scale(1);
  transform: translateY(140px) scale(1);
  transition-delay: 0.1s;
}
.mfb-component--tl.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(210px) scale(1);
  transform: translateY(210px) scale(1);
  transition-delay: 0.15s;
}
.mfb-component--tl.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(280px) scale(1);
  transform: translateY(280px) scale(1);
  transition-delay: 0.2s;
}
.mfb-component--tl.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(5), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(5),
.mfb-component--tr.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(5),
.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(5) {
  -webkit-transform: translateY(350px) scale(1);
  transform: translateY(350px) scale(1);
  transition-delay: 0.25s;
}

.mfb-component--bl.mfb-zoomin .mfb-component__list li,
.mfb-component--br.mfb-zoomin .mfb-component__list li {
  -webkit-transform: scale(0);
  transform: scale(0);
}
.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(-70px) scale(0);
  transform: translateY(-70px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.2s;
}
.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(-140px) scale(0);
  transform: translateY(-140px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.15s;
}
.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(-210px) scale(0);
  transform: translateY(-210px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.1s;
}
.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(-280px) scale(0);
  transform: translateY(-280px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.05s;
}
.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(5),
.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(5) {
  -webkit-transform: translateY(-350px) scale(0);
  transform: translateY(-350px) scale(0);
  transition: all 0.5s;
  transition-delay: 0s;
}
.mfb-component--bl.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(-70px) scale(1);
  transform: translateY(-70px) scale(1);
  transition-delay: 0.05s;
}
.mfb-component--bl.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(-140px) scale(1);
  transform: translateY(-140px) scale(1);
  transition-delay: 0.1s;
}
.mfb-component--bl.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(-210px) scale(1);
  transform: translateY(-210px) scale(1);
  transition-delay: 0.15s;
}
.mfb-component--bl.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(-280px) scale(1);
  transform: translateY(-280px) scale(1);
  transition-delay: 0.2s;
}
.mfb-component--bl.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(5), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(5),
.mfb-component--br.mfb-zoomin[data-mfb-hover]:hover .mfb-component__list li:nth-child(5),
.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(5) {
  -webkit-transform: translateY(-350px) scale(1);
  transform: translateY(-350px) scale(1);
  transition-delay: 0.25s;
}

/**
 * FOUNTAIN
 * When hovering the main button the child buttons
 * jump into view from outside the viewport
 */
.mfb-component--tl.mfb-fountain .mfb-component__list li,
.mfb-component--tr.mfb-fountain .mfb-component__list li {
  -webkit-transform: scale(0);
  transform: scale(0);
}
.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(-70px) scale(0);
  transform: translateY(-70px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.2s;
}
.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(-140px) scale(0);
  transform: translateY(-140px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.15s;
}
.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(-210px) scale(0);
  transform: translateY(-210px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.1s;
}
.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(-280px) scale(0);
  transform: translateY(-280px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.05s;
}
.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(5),
.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(5) {
  -webkit-transform: translateY(-350px) scale(0);
  transform: translateY(-350px) scale(0);
  transition: all 0.5s;
  transition-delay: 0s;
}
.mfb-component--tl.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(70px) scale(1);
  transform: translateY(70px) scale(1);
  transition-delay: 0.05s;
}
.mfb-component--tl.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(140px) scale(1);
  transform: translateY(140px) scale(1);
  transition-delay: 0.1s;
}
.mfb-component--tl.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(210px) scale(1);
  transform: translateY(210px) scale(1);
  transition-delay: 0.15s;
}
.mfb-component--tl.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(280px) scale(1);
  transform: translateY(280px) scale(1);
  transition-delay: 0.2s;
}
.mfb-component--tl.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(5), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(5),
.mfb-component--tr.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(5),
.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(5) {
  -webkit-transform: translateY(350px) scale(1);
  transform: translateY(350px) scale(1);
  transition-delay: 0.25s;
}

.mfb-component--bl.mfb-fountain .mfb-component__list li,
.mfb-component--br.mfb-fountain .mfb-component__list li {
  -webkit-transform: scale(0);
  transform: scale(0);
}
.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(70px) scale(0);
  transform: translateY(70px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.2s;
}
.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(140px) scale(0);
  transform: translateY(140px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.15s;
}
.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(210px) scale(0);
  transform: translateY(210px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.1s;
}
.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(280px) scale(0);
  transform: translateY(280px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.05s;
}
.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(5),
.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(5) {
  -webkit-transform: translateY(350px) scale(0);
  transform: translateY(350px) scale(0);
  transition: all 0.5s;
  transition-delay: 0s;
}
.mfb-component--bl.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(-70px) scale(1);
  transform: translateY(-70px) scale(1);
  transition-delay: 0.05s;
}
.mfb-component--bl.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(-140px) scale(1);
  transform: translateY(-140px) scale(1);
  transition-delay: 0.1s;
}
.mfb-component--bl.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(-210px) scale(1);
  transform: translateY(-210px) scale(1);
  transition-delay: 0.15s;
}
.mfb-component--bl.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(-280px) scale(1);
  transform: translateY(-280px) scale(1);
  transition-delay: 0.2s;
}
.mfb-component--bl.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(5), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(5),
.mfb-component--br.mfb-fountain[data-mfb-hover]:hover .mfb-component__list li:nth-child(5),
.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(5) {
  -webkit-transform: translateY(-350px) scale(1);
  transform: translateY(-350px) scale(1);
  transition-delay: 0.25s;
}

/*------------------------------------*\
    #LABELS | base
\*------------------------------------*/
/**
 * These are the labels associated to each button,
 * exposed only when hovering the related button.
 * They are called labels but are in fact data-attributes of
 * each button (an anchor tag).
 */
[data-mfb-label]:after {
  content: attr(data-mfb-label);
  opacity: 0;
  transition: all 0.5s;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 10px;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  margin-top: -10.5px;
  transition: all 0.5s;
}

[data-mfb-hover] [data-mfb-label]:hover:after,
[data-mfb-state="open"] [data-mfb-label]:after {
  content: attr(data-mfb-label);
  opacity: 1;
  transition: all 0.3s;
}

/*------------------------------------*\
    #LABELS | Modifiers
\*------------------------------------*/
.mfb-component--br [data-mfb-label]:after, .mfb-component--tr [data-mfb-label]:after {
  content: attr(data-mfb-label);
  right: 70px;
}

.mfb-component--tl [data-mfb-label]:after, .mfb-component--bl [data-mfb-label]:after {
  content: attr(data-mfb-label);
  left: 70px;
}

/*------------------------------------*\
    #DEVELOPMENT | In development
\*------------------------------------*/
/**
 * This part is where unfinished code should stay.
 * When a feature is ready(sh) move these styles to their proper place.
 */
/*------------------------------------*\
    #DEVELOPMENT | Debuggers
\*------------------------------------*/
/**
 * These are mainly helpers for development. They do not have to end up
 * in production but it's handy to keep them when developing.
 */
/**
 * Apply this class to the html tag when developing the slide-in button
 */
html.mfb-slide-in {
  border-top: 5px solid teal;
}

html.mfb-debug * {
  border: 1px solid red;
}