/* ------------------------------------------------------------------------------
*
*  # Floating action buttons
*
*  Material design floating action button with menu
*
*  Version: 1.0
*  Latest update: Mar 10, 2016
*
* ---------------------------------------------------------------------------- */


// Main menu
// -------------------------

// Base
.fab-menu {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: (@zindex-navbar - 1);
}


//
// Positions
//

// Absolute
.fab-menu-absolute {
    position: absolute;

    // Affix
    &.affix {
        position: fixed;
    }
}

// Fixed
.fab-menu-fixed {
    position: fixed;
    z-index: @zindex-navbar-fixed;
}



// Button positions
// -------------------------

 // Top left position
.fab-menu-top-left,
.fab-menu-top-right, {
    margin-top: -(@fab-main-btn-size / 2);
    
    &.affix {
       top: @line-height-computed; 
       margin-top: 0;
    }

    .content-wrapper > & {
        top: -(@fab-main-btn-size / 2);
    }
    .content-wrapper > &.affix {
        top: @line-height-computed;
    }

    .navbar-top &.affix,
    .navbar-affixed-top &.affix {
        top: (@navbar-height + @line-height-computed);
    }

    .navbar-top-lg &.affix,
    .navbar-affixed-top-lg &.affix {
        top: (@navbar-height-large + @line-height-computed);
    }
    .navbar-top-sm &.affix,
    .navbar-affixed-top-sm &.affix {
        top: (@navbar-height-small + @line-height-computed);
    }
    .navbar-top-xs &.affix,
    .navbar-affixed-top-xs &.affix {
        top: (@navbar-height-mini + @line-height-computed);
    }
}

.fab-menu-bottom-left,
.fab-menu-bottom-right {
    bottom: @line-height-computed;
    .transition(bottom ease-in-out 0.15s);
    
    // Keep space for footer
    &.reached-bottom {
        bottom: (@line-height-computed * 4);

        .navbar-bottom &  {
            bottom: (@line-height-computed * 2) + @navbar-height;
        }
        .navbar-bottom-lg & {
            bottom: (@line-height-computed * 2) + @navbar-height-large;
        }
        .navbar-bottom-sm & {
            bottom: (@line-height-computed * 2) + @navbar-height-small;
        }
        .navbar-bottom-xs & {
            bottom: (@line-height-computed * 2) + @navbar-height-mini;
        }
    }
}

// Left position
.fab-menu-top-left,
.fab-menu-bottom-left {
    //left: @grid-gutter-width;
}

// Top right position
.fab-menu-top-right,
.fab-menu-bottom-right {
    right: @grid-gutter-width;
}



// Inner menu
// -------------------------

.fab-menu-inner {
    list-style: none;
    margin: 0;
    padding: 0;

    // Menu items
    > li {
        display: block;
        position: absolute;
        top: @fab-btn-difference;
        left: 0;
        right: 0;
        text-align: center;
        padding-top: @fab-inner-btn-spacing;
        margin-top: -(@fab-inner-btn-spacing);

        // Remove border from buttons
        .btn {
            border-width: 0;
        }

        // Make buttons smaller than main one
        .btn-float {
            padding: 0;
            width: @fab-inner-btn-size;
            height: @fab-inner-btn-size;
            .box-shadow(@shadow-depth1);

            // Hover state
            &:hover,
            &:focus {
                .box-shadow(@shadow-depth2);
            }

            // Icon spacing
            > i {
                margin: (@btn-float-padding - @fab-btn-difference);
            }

            &.btn-flat {
                > i {
                    margin: (@btn-float-padding - @fab-btn-difference - 2);
                }
            }
        }


        //
        // Labels, badges and status marks
        //

        // Base
        .badge,
        .label,
        .status-mark {
            position: absolute;

            @media (min-width: @grid-float-breakpoint) {
                .box-shadow(0 0 0 2px @body-bg);
            }
        }

        // Labels and badges
        .badge,
        .label {
            top: @fab-inner-btn-spacing - 4px;
            right: -4px;
        }

        // Status marks
        .status-mark {
            top: @fab-inner-btn-spacing + 2px;
            right: 2px;
        }


        //
        // Change appearance in bottom position
        //

        .fab-menu-bottom-left &,
        .fab-menu-bottom-right & {
            padding-top: 0;
            margin-top: 0;
            padding-bottom: @fab-inner-btn-spacing;
            margin-bottom: -(@fab-inner-btn-spacing);

            // Labels and badges
            .badge,
            .label {
                top: -4px;
            }

            // Status marks
            .status-mark {
                top: 2px;
            }
        }
    }

    // Dropdown menu
    .dropdown-menu {
        margin-top: 0;
        margin-right: 10px;
        top: (@fab-inner-btn-spacing) - (@fab-btn-difference / 2);
        left: auto;
        right: 100%;
    }

    // Right dropdown menu position
    .dropdown-menu-right {
        margin-right: 0;
        margin-left: 10px;
        right: auto;
        left: 100%;
    }
}



// Main button
// -------------------------

// Base
.fab-menu-btn {
    z-index: (@zindex-navbar + 1);
    border-width: 0;
    .box-shadow(@shadow-depth1);

    // Float button overrides
    &.btn-float {
        padding: (@fab-main-btn-size / 2);

        // Icons
        > i {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -(@icon-font-size / 2);
            margin-left: -(@icon-font-size / 2);
        }
    }

    // Button shadow
    &:hover,
    &:focus,
    .fab-menu[data-fab-toggle="hover"]:hover &,
    .fab-menu[data-fab-state="open"] & {
        .box-shadow(@shadow-depth2);
    }
}


//
// Icons animation
//

// Animation
.fab-icon-close,
.fab-icon-open {
    .rotate(360deg);
    .transition(all ease-in-out 0.3s);

    // Reverse rotation if active
    .fab-menu[data-fab-toggle="hover"]:hover &,
    .fab-menu[data-fab-state="open"] & {
        .rotate(0deg);
    }
}

// Open icon
.fab-icon-open {
    .fab-menu[data-fab-toggle="hover"]:hover &,
    .fab-menu[data-fab-state="open"] & {
        .opacity(0);
    }
}

// Close icon
.fab-icon-close {
    .opacity(0);

    // Display if active
    .fab-menu[data-fab-toggle="hover"]:hover &,
    .fab-menu[data-fab-state="open"] & {
        .opacity(1);
    }
}



// Inner menu animation
// -------------------------

// Base
.fab-menu {

    // Hide items
    .fab-menu-inner > li {
        visibility: hidden;
        .opacity(0);
        .transition(all ease-in-out 0.3s);

        // Items number
        &:nth-child(1) {
            .transition-delay(0.05s);
        }
        &:nth-child(2) {
            .transition-delay(0.1s);
        }
        &:nth-child(3) {
            .transition-delay(0.15s);
        }
        &:nth-child(4) {
            .transition-delay(0.2s);
        }
        &:nth-child(5) {
            .transition-delay(0.25s);
        }
    }

    // Show items
    &[data-fab-toggle="hover"]:hover,
    &[data-fab-state="open"] {
        .fab-menu-inner > li {
            visibility: visible;
            .opacity(1);
        }
    }
}

// Top position
.fab-menu-top,
.fab-menu-top-left,
.fab-menu-top-right {
    &[data-fab-toggle="hover"]:hover,
    &[data-fab-state="open"] {
        .fab-menu-inner > li {
            &:nth-child(1) {
                top: (@fab-inner-btn-size + @fab-inner-btn-spacing) + (@fab-btn-difference * 2);
                .transition-delay(0.05s);
            }
            &:nth-child(2) {
                top: ((@fab-inner-btn-size + @fab-inner-btn-spacing) * 2) + (@fab-btn-difference * 2);
                .transition-delay(0.1s);
            }
            &:nth-child(3) {
                top: ((@fab-inner-btn-size + @fab-inner-btn-spacing) * 3) + (@fab-btn-difference * 2);
                .transition-delay(0.15s);
            }
            &:nth-child(4) {
                top: ((@fab-inner-btn-size + @fab-inner-btn-spacing) * 4) + (@fab-btn-difference * 2);
                .transition-delay(0.2s);
            }
            &:nth-child(5) {
                top: ((@fab-inner-btn-size + @fab-inner-btn-spacing) * 5) + (@fab-btn-difference * 2);
                .transition-delay(0.25s);
            }
        }
    }
}

// Bottom position
.fab-menu-bottom,
.fab-menu-bottom-left,
.fab-menu-bottom-right {
    &[data-fab-toggle="hover"]:hover,
    &[data-fab-state="open"] {
        .fab-menu-inner > li {
            &:nth-child(1) {
                top: -(@fab-inner-btn-size + @fab-inner-btn-spacing) + (@fab-btn-difference * 2);
                .transition-delay(0.05s);
            }
            &:nth-child(2) {
                top: -((@fab-inner-btn-size + @fab-inner-btn-spacing) * 2) + (@fab-btn-difference * 2);
                .transition-delay(0.1s);
            }
            &:nth-child(3) {
                top: -((@fab-inner-btn-size + @fab-inner-btn-spacing) * 3) + (@fab-btn-difference * 2);
                .transition-delay(0.15s);
            }
            &:nth-child(4) {
                top: -((@fab-inner-btn-size + @fab-inner-btn-spacing) * 4) + (@fab-btn-difference * 2);
                .transition-delay(0.2s);
            }
            &:nth-child(5) {
                top: -((@fab-inner-btn-size + @fab-inner-btn-spacing) * 5) + (@fab-btn-difference * 2);
                .transition-delay(0.25s);
            }
        }
    }
}



// Item labels
// -------------------------

.fab-menu-inner div[data-fab-label] {

    // Base
    &:after {
        content: attr(data-fab-label);
        position: absolute;
        top: 50%;
        margin-top: -(@padding-base-vertical);
        right: (@fab-btn-difference + @fab-inner-btn-size + @grid-gutter-width);
        color: @tooltip-color;
        background-color: @tooltip-bg;
        padding: @padding-base-vertical @padding-base-horizontal;
        visibility: hidden;
        border-radius: @border-radius-base;
        .box-shadow(@shadow-depth1);
        .opacity(0);
        .transition(all ease-in-out 0.3s);

        // Reposition them in bottom position
        .fab-menu-bottom-left &,
        .fab-menu-bottom-right & {
            margin-top: -(@padding-base-vertical + @fab-inner-btn-spacing);
        }
    }

    // Placement
    .fab-menu-top-left &:after,
    .fab-menu-bottom-left &:after,
    &.fab-label-right:after {
        right: auto;
        left: (@fab-btn-difference + @fab-inner-btn-size + @grid-gutter-width);
    }

    // Display labels
    .fab-menu[data-fab-toggle="hover"] &:hover:after,
    .fab-menu[data-fab-state="open"] &:hover:after {
        visibility: visible;
        .opacity(1);
    }

    // Light label
    &.fab-label-light:after {
        background-color: @panel-bg;
        color: @text-color;
    }

    // Always visible
    &.fab-label-visible:after {
        visibility: visible;
        .opacity(1);
    }
}