
// mixin
@mixin button-line-variant($color, $background, $border) {
    color: $text-color;
    background-color: transparent; 
    border-color: $border;

    &:hover,
    &:focus,
    &:active,
    &.active {
        color: $color;
        background-color: $background;
    }
    .open & {
        &.dropdown-toggle {
            color: $color;
            background-color: $background;
        }
    }
}

@mixin button-icon-variant($size) {
    height: $size;
    width: $size;
    line-height: $size;
    i { line-height: $size; }
    &.btn-icon-lined {
        line-height: ($size - 4px);
        i { line-height: ($size - 4px); }

        &.btn-icon-thin {
            line-height: ($size - 2px);
            i { line-height: ($size - 2px); }
        }
    }    
}

@mixin social-button-variant($background, $border) {
    color: $reverse;
    background-color: $background;
    border-color: $border;
    &:hover,
    &:focus,
    &:active {
        color: $reverse;
        text-decoration: none;
        background-color: darken($background, 8%);
        border-color: darken($border, 12%)        
    }    
}
@mixin button-state-color($background) {
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active,
    .open > &.dropdown-toggle {
        background-color: darken($background, 5%);
            border-color: darken($background, 5%);
    }
}





// add to default button
.btn-info-alt {
    @include button-variant($btn-info-alt-color, $btn-info-alt-bg, $btn-info-alt-border);
}
.btn-dark {
    @include button-variant($btn-dark-color, $btn-dark-bg, $btn-dark-border);
}

// lined version
.btn-line-default {
    @include button-line-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}
.btn-line-primary {
    @include button-line-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
.btn-line-success {
    @include button-line-variant($btn-success-color, $btn-success-bg, $btn-success-border);
}
.btn-line-info {
    @include button-line-variant($btn-info-color, $btn-info-bg, $btn-info-border);
}
.btn-line-warning {
    @include button-line-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
}
.btn-line-danger {
    @include button-line-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
}
.btn-line-dark {
    @include button-line-variant($btn-dark-color, $btn-dark-bg, $btn-dark-border);
}

//
.btn-w-xs { min-width: 80px; }
.btn-w-sm { min-width: 100px; }
.btn-w-md { min-width: 135px; }
.btn-w-lg { min-width: 160px; }

// 
.btn-round { border-radius: 2em; }
.btn-gap { margin: 5px; }
.btn-gap-h { margin: 0 5px; }
.btn-gap-v { margin: 0 0 5px; }

// 
.btn,
.btn-group {
    &.btn-raised {
        text-transform: uppercase;
        @extend .z-depth-1;
        @include transition(.25s ease-out);
        &:hover,
        &:focus,
        &:active {
            outline: none;
        }
        &:disabled,
        &.disabled {
            box-shadow: none;
        }
        &:hover {
            @extend .z-depth-1-half;
        }
    }
    &.btn-floating {
        @extend .z-depth-1;
        @include transition(.25s);
        &:hover,
        &:focus,
        &:active {
            outline: none;
        }
        &:disabled,
        &.disabled {
            box-shadow: none;
        }
        &:hover {
            @extend .z-depth-1-half;
        }        
    }

    &.btn-raised,
    &.btn-floating {
        &.btn-primary { @include button-state-color($brand-primary); }
        &.btn-info { @include button-state-color($brand-info); }
        &.btn-warning { @include button-state-color($brand-warning); }
        &.btn-danger { @include button-state-color($brand-danger); }
        &.btn-default { @include button-state-color($btn-default-bg); }
    }
}
.btn-flat {
    background: none;
    color: $text-color;
    border: 1px solid transparent;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
    @include transition(.25s ease-out);
    &:hover,
    &:focus,
    &:active {
        background-color: $bright;
        outline: none;
        box-shadow: none;
        border-color: $bright;
    }
    &.btn-primary {
        color: $brand-primary;
    }
    &.btn-info {
        color: $brand-info;
    }
    &.btn-warning {
        color: $brand-warning;
    }
    &.btn-danger {
        color: $brand-danger;
    }
}


// 
.btn-icon {
    padding: 0;
    display: inline-block;
    text-align: center;
    border-radius: $border-radius-base;
    @include button-icon-variant(35px);
}
.btn-icon-lined {
    display: inline-block;
    text-align: center;
    border-radius: $border-radius-base;
    background-color: $reverse;
    border-width: 2px;
    border-style: solid;
    border-color: $text-color;
    color: $text-color;
    @include button-icon-variant(35px);
    &.btn-icon-thin {
        border-width: 1px;
    }
    &:hover {
        background-color: $reverse;
        color: $reverse;
    }

    // 
    &.btn-default-light {
        color: #bbb;
        border: 2px solid #bbb;

        &:hover {
            color: #bbb;
            border: 2px solid #bbb;
        }
    }
    &.btn-default {
        color: $gray-light;
        border-color: $gray-light;

        &:hover {
            color: $gray-light;
            border-color: $gray-light;
        }
    }
    &.btn-primary {
        color: $brand-primary;
        border-color: $brand-primary;
    }
    &.btn-success {
        color: $brand-success;
        border-color: $brand-success;
    }
    &.btn-info {
        color: $brand-info;
        border-color: $brand-info;
    }
    &.btn-warning {
        color: $brand-warning;
        border-color: $brand-warning;
    }
    &.btn-danger {
        color: $brand-danger;
        border-color: $brand-danger;
    }  
}
.btn-icon-round {
    border-radius: 50%;
}
.btn-icon-sm {
    @include button-icon-variant(30px);
}
.btn-icon-md {
    @include button-icon-variant(45px);
    font-size: 18px;
}
.btn-icon-lg {
    @include button-icon-variant(65px);
    font-size: 28px;
}
.btn-icon-lg-alt {
    @include button-icon-variant(70px);
}
.btn-icon-xl {
    @include button-icon-variant(80px);
}


// social buttons
.btn-twitter { @include social-button-variant(#00c7f7, #00c7f7); }
.btn-facebook { @include social-button-variant(#335397, #335397); }
.btn-gplus,
.btn-google-plus { @include social-button-variant(#dd4a38, #dd4a38); }
.btn-instagram { @include social-button-variant(#82685A, #82685A); }
.btn-vimeo { @include social-button-variant(#63879C, #63879C); }
.btn-flickr { @include social-button-variant(#0061DB, #0061DB); }
.btn-github { @include social-button-variant(#3B3B3B, #3B3B3B); }
.btn-pinterest { @include social-button-variant(#D73532, #D73532); }
.btn-tumblr { @include social-button-variant(#586980, #586980); }
.btn-linkedin { @include social-button-variant(#018FAF, #018FAF); }
.btn-dribbble { @include social-button-variant(#EA73A0, #EA73A0); }
.btn-stumbleupon { @include social-button-variant(#EA4B24, #EA4B24); }
.btn-lastfm { @include social-button-variant(#B80638, #B80638); }
.btn-evernote { @include social-button-variant(#3BAB27, #3BAB27); }
.btn-skype { @include social-button-variant(#00B0F6, #00B0F6); }
.btn-soundcloud { @include social-button-variant(#0066FF, #0066FF); }
.btn-behance { @include social-button-variant(#B80638, #B80638); }
.btn-rss { @include social-button-variant(#F79638, #F79638); }
.btn-youtube { @include social-button-variant(#CC181E, #CC181E); }
