$_drops_animation_duration:     0.375s;
$_drops_animation_delay:        0.175s; // hover intent
$_drops_animation_scale:        1;

$_drops_animation_distance:     20px;

$_link_toggle_size: 6px;

.g1-drop {
    display: block;
    margin-bottom: 1.5rem;
}

.g1-drop-toggle {
    display: none;
    position: relative;
    font-size: 0;
    font-family: $menu_font_family;
    font-weight: $menu_font_weight;
    text-transform: uppercase;

    @include transition(
        border-color 0.375s ease-in-out,
        background-color 0.375s ease-in-out,
        color 0.375s ease-in-out,
        opacity 0.375s ease-in-out
    );
}

.g1-drop-toggle-icon {
    display: inline-block;
    width: $drop_toggle_width;
    height: 40px;

    font-size: 14px;
    font-style: normal;
    text-align: center;
    vertical-align: middle;

    &:before {
        font-size: 32px;
        line-height: 40px;
        font-family: "bimber";
    }
}

.g1-drop-toggle-badge {
    display: inline-block;
    visibility: visible;
    min-width: 1em;
    padding: 0 0.25em;

    position: absolute;
    #{$right}: -0.75em;
    #{$left}: auto;
    top: -0.375em;

    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 300;

    z-index:2;

    @include border-radius( 0.75em );
}

.g1-drop-toggle-badge-hidden {
    visibility: hidden;
}

.g1-drop-toggle-arrow {
    display: none;
    position: absolute;
    z-index: 99;
    #{$left}: 50%;
    #{$right}: auto;
    bottom: 0;

    width: 0;
    height: 0;
    margin-#{$left}: -$_link_toggle_size;
    border-width: $_link_toggle_size;;

    border-style: solid;

    border-color: transparent transparent currentColor transparent;

    content: "";

    /* Hide if there's no .g1-drop-content inside .g1-drop */
    .g1-drop-toggle:last-child > & {
        display: none !important;
    }
}


.g1-drop-content {
    display: block;
    @include box-sizing( border-box );
}

.g1-dropable {
    .g1-drop {
        display: inline-block;
        margin-#{$left}: 10px;
        vertical-align: top;
    }


    .g1-drop-toggle {
        display: inline-block;
    }

    .g1-drop-content {
        display: none;
        position: absolute;
        z-index: 1;
        #{$left}: 0;
        #{$right}: 0;

        background-color: $skin_background_color;

        @include box-shadow( 0 15px 45px 15px rgba(0,0,0, 0.07) );
    }
}

.g1-hoverable .g1-dropable .g1-drop:hover,
.g1-dropable .g1-drop-expanded {
    .g1-drop-content {
        display: block;
    }
}

@media only screen and ( min-width: 1025px ) {
    .g1-dropable {
        .g1-drop {
            position: relative;
        }

        .g1-drop-content {
            width: 320px;
            #{$left}: 0;
            #{$right}: auto;
            top: 100%;
        }

        .g1-drop-before {
            .g1-drop-content {
                #{$right}: 0;
                #{$left}: auto;
            }
        }
    }
}



/* Individual elements */

// User Navigation.
.g1-drop-the-user {
    .g1-drop-toggle-icon {
        position: relative;

        &:before {
            content: "\e013";

            body.logged-in & {
                visibility: hidden;
            }
        }

        .avatar {
            position: absolute;
            z-index: 2;
            #{$left}: if-stack( 'bunchy', 0, 0px );
            #{$right}: auto;
            top: if-stack( 'bunchy', 0, 5px );;
        }
    }
}

// Search.
.g1-drop-the-search {
    .g1-drop-toggle-icon:before {
        content: "\e016";
    }
}

// Social profiles.
.g1-drop-the-socials {
    .g1-drop-toggle-icon:before {
        content: "\e011";
    }
}


// WordPress MultiLingual Plugin.
.g1-drop-the-wpml {
    > .g1-drop-content {
        #{$left}: 50%;
        #{$right}: auto;
        width: 180px;
        padding: 6px;
        margin-#{$left}: -90px;
    }
}


.g1-dropable {
    .g1-drop-the-socials {
        // The drop content is always positioned against the drop
        position: relative;

        > .g1-drop-content {
            #{$left}: 50%;
            #{$right}: auto;
            width: 60px*1;
            padding: 6px;
            margin-#{$left}: -30px;
        }

        .g1-socials-items {
            margin: 0;
        }
    }

    .g1-drop-the-search {
        .search-form {
            margin: 20px 30px;
        }

        .g1-searches {
            > ul {
                margin-#{$left}: 30px;
                margin-#{$right}: 30px;
            }

            > .no-results {
                margin-#{$left}: 30px;
                margin-#{$right}: 30px;
                text-align: center;
            }

            .g1-searches-all-results {
                padding: 8px 30px;
                margin: 0;
                border-width: 1px 0 0;

                border-style: solid;

                border-color: $skin_border_color;
            }
        }
    }

    .g1-drop-the-cart {
        margin-left: 20px;
        .product_list_widget {
            margin: 0;
        }

        > .g1-drop-content {
            padding: 15px;
        }
    }
}






/* CSS3 animations */
$_visibility_delay: $_drops_animation_duration/$_drops_animation_scale+$_drops_animation_delay/$_drops_animation_scale;
$_duration: $_drops_animation_duration/$_drops_animation_scale;
$_delay: $_drops_animation_delay/$_drops_animation_scale;


.g1-dropable .g1-drop > .g1-drop-content,
.g1-dropable .g1-drop > .g1-drop-toggle > .g1-drop-toggle-arrow {
    display: block;
    visibility: hidden;
    @include opacity( 0 );
    @include translate( 0px, $_drops_animation_distance );
    @include transition(
            visibility 0s $_visibility_delay,
            opacity $_duration ease-in-out $_delay,
            transform $_duration ease-in-out $_delay
    );

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

.g1-hoverable .g1-dropable .g1-drop:hover > .g1-drop-content,
.g1-hoverable .g1-dropable .g1-drop:hover > .g1-drop-toggle > .g1-drop-toggle-arrow,
.g1-dropable .g1-drop-expanded > .g1-drop-content,
.g1-dropable .g1-drop-expanded > .g1-drop-toggle > .g1-drop-toggle-arrow {
    visibility: visible;
    @include opacity(1);
    @include translate(0px, 0px);
    @include transition(
            visibility 0s ease-in-out $_drops_animation_delay,
            opacity $_drops_animation_duration ease-in-out $_drops_animation_delay,
            transform $_drops_animation_duration ease-in-out $_drops_animation_delay
    );
}


@keyframes g1-drop-toggle-badge-jump {
    0%      { transform: translate(0,0); }
    25%     { transform: translate(0,-12px); }
    50%     { transform: translate(0,0); }
    75%     { transform: translate(0,-6px); }
    100%    { transform: translate(0,0); }
}


.g1-drop-toggle-badge-animate {
    animation: g1-drop-toggle-badge-jump 0.666s ease-in-out forwards;
}