/* REBLIM BUTTONS
----------------------------------------------*/
//rb-button transition
$rb-button-transition : 0.6s;

//rb-button margin
$rb-button-margin : 2px;

//rb-button border
$rb-button-border : 2px;

//rb-button darkness level
$rb-button-contrast-level : 12;

//rb-button colors
$rb-button-primary-bg     : #1abc9c;
$rb-button-secondary-bg   : #9b59b6;
$rb-button-success-bg     : #2ecc71;
$rb-button-danger-bg      : #e74c3c;
$rb-button-disabled-bg    : #ecf0f1;
$rb-button-disabled-color : #bdc3c7;
$rb-button-color          : #ffffff;

//rb-button radius
$rb-button-radius-standard : 4px;
$rb-button-radius-round    : 50px;
$rb-button-radius-square   : 0;
$rb-buttons-radius-first   : 4px;
$rb-buttons-radius-middle  : 0;
$rb-buttons-radius-last    : 4px;

//rb-button weights
$rb-button-weight-lighter : 300;
$rb-button-weight-light   : 400;
$rb-button-weight-normal  : 500;
$rb-button-weight-bold    : 700;
$rb-button-weight-bolder  : 900;

//rb-button sizes
$rb-button-size-XXS : 0.50rem;
$rb-button-size-XS  : 0.75rem;
$rb-button-size-S   : 1rem;
$rb-button-size-P   : 1.25rem;
$rb-button-size-L   : 1.50rem;
$rb-button-size-XL  : 1.75rem;
$rb-button-size-XXL : 2rem;

//rb-button tall & short 
$rb-button-height-standard : 10px 20px;
$rb-button-height-wide     : 10px 40px;
$rb-button-height-short    : 4px 20px;
$rb-button-height-tall     : 20px;

//rb-button gradient mixins
@mixin rb-gradient($end, $start : lighten($end, 20)) {
    background: $start;
    background: -o-linear-gradient(top, $start 0%, $end 100%);
    background: -moz-linear-gradient(top, $start 0%, $end 100%);
    background: -webkit-linear-gradient(top, $start 0%, $end 100%);
    background: linear-gradient(to bottom, $start 0%, $end 100%);
}

@mixin rb-gradientDark($end, $start : darken($end, 20)) {
    background: $start;
    background: -o-linear-gradient(top, $start 0%, $end 100%);
    background: -moz-linear-gradient(top, $start 0%, $end 100%);
    background: -webkit-linear-gradient(top, $start 0%, $end 100%);
    background: linear-gradient(to bottom, $start 0%, $end 100%);
}

@mixin rb-reblim-gradient($end, $start : lighten($end, 20)) {
    background: $start;
    background: -o-linear-gradient(left, $start 0%, $end 100%);
    background: -moz-linear-gradient(left, $start 0%, $end 100%);
    background: -webkit-linear-gradient(left, $start 0%, $end 100%);
    background: linear-gradient(to right, $start 0%, $end 100%);
}

//rb-button standard button mixin
@mixin rb-button {
    display: inline-block;
    -webkit-appearance: none;
    margin: $rb-button-margin auto;
    outline: none;
    border: none;
    border-radius: $rb-button-radius-standard;
    padding: $rb-button-height-standard;
    font-size: $rb-button-size-P;
    font-weight: $rb-button-weight-normal;
    text-align: center;
    color: $rb-button-color;
    background: $rb-button-primary-bg;
    -webkit-transition: all $rb-button-transition;
            transition: all $rb-button-transition;
    cursor: pointer;
    
    &:hover {
        background: darken($rb-button-primary-bg, $rb-button-contrast-level);
    }
    
    &.rb-no-margin { margin: 0; }
    
    &.rb-100 { width: 100%; }
    &.rb-block { display: block; }
    
    &.rb-border { border: $rb-button-border solid darken($rb-button-primary-bg, $rb-button-contrast-level); }
    
    &.rb-round { border-radius: $rb-button-radius-round; }
    &.rb-square { border-radius: $rb-button-radius-square; }
    
    &.rb-lighter { font-weight: $rb-button-weight-lighter; }
    &.rb-light { font-weight: $rb-button-weight-light; }
    &.rb-bold { font-weight: $rb-button-weight-bold; }
    &.rb-bolder { font-weight: $rb-button-weight-bolder; }
    
    &.rb-wide { padding: $rb-button-height-wide; }
    &.rb-short { padding: $rb-button-height-short; }
    &.rb-tall { padding: $rb-button-height-tall; }
    
    &.rb-mini { font-size: $rb-button-size-XXS; }
    &.rb-tiny { font-size: $rb-button-size-XS; }
    &.rb-small { font-size: $rb-button-size-S; }
    &.rb-big { font-size: $rb-button-size-L; }
    &.rb-huge { font-size: $rb-button-size-XL; }
    &.rb-mega { font-size: $rb-button-size-XXL; }
    
    &.rb-gradient {
        @include rb-gradient($rb-button-primary-bg);
        
        &:hover {
            @include rb-gradient(darken($rb-button-primary-bg, $rb-button-contrast-level));
        }
        
        &.rb-dark {
            @include rb-gradientDark($rb-button-primary-bg);
            
            &:hover {
                @include rb-gradientDark(darken($rb-button-primary-bg, $rb-button-contrast-level));
            }
        }
    }
}

.reblim,
.rb {
    
    &.rb-button,
    .rb-button {
        @include rb-button;
            
        &.rb-reblim {
            @include rb-reblim-gradient($rb-button-secondary-bg, $rb-button-primary-bg);

            &.rb-border { border: $rb-button-border solid darken($rb-button-primary-bg, $rb-button-contrast-level); }

            &:hover {
                @include rb-reblim-gradient($rb-button-primary-bg, $rb-button-secondary-bg);
            }
        }
        
        &.rb-secondary {
            background: $rb-button-secondary-bg;

            &:hover {
                background: darken($rb-button-secondary-bg, $rb-button-contrast-level);
            }
            
            &.rb-border { border: $rb-button-border solid darken($rb-button-secondary-bg, $rb-button-contrast-level); }
            
            &.rb-gradient {
                @include rb-gradient($rb-button-secondary-bg);

                &:hover {
                    @include rb-gradient(darken($rb-button-secondary-bg, $rb-button-contrast-level));
                }
                
               &.rb-dark {
                    @include rb-gradientDark($rb-button-secondary-bg);

                    &:hover {
                        @include rb-gradientDark(darken($rb-button-secondary-bg, $rb-button-contrast-level));
                    }
                }
            }
        }
        
        &.rb-success {
            background: $rb-button-success-bg;

            &:hover {
                background: darken($rb-button-success-bg, $rb-button-contrast-level);
            }
            
            &.rb-border { border: $rb-button-border solid darken($rb-button-success-bg, $rb-button-contrast-level); }
            
            &.rb-gradient {
                @include rb-gradient($rb-button-success-bg);

                &:hover {
                    @include rb-gradient(darken($rb-button-success-bg, $rb-button-contrast-level));
                }
                
               &.rb-dark {
                    @include rb-gradientDark($rb-button-success-bg);

                    &:hover {
                        @include rb-gradientDark(darken($rb-button-success-bg, $rb-button-contrast-level));
                    }
                }
            }
        }
        
        &.rb-danger {
            background: $rb-button-danger-bg;

            &:hover {
                background: darken($rb-button-danger-bg, $rb-button-contrast-level);
            }
            
            &.rb-border { border: $rb-button-border solid darken($rb-button-danger-bg, $rb-button-contrast-level); }
            
            &.rb-gradient {
                @include rb-gradient($rb-button-danger-bg);

                &:hover {
                    @include rb-gradient(darken($rb-button-danger-bg, $rb-button-contrast-level));
                }
                
               &.rb-dark {
                    @include rb-gradientDark($rb-button-danger-bg);

                    &:hover {
                        @include rb-gradientDark(darken($rb-button-danger-bg, $rb-button-contrast-level));
                    }
                }
            }
        }
        
        &.rb-disabled {
            color: $rb-button-disabled-color;
            background: $rb-button-disabled-bg;
            cursor: not-allowed;
            
            &:hover {
                background: darken($rb-button-disabled-bg, $rb-button-contrast-level);
            }
            
            &.rb-border { border: $rb-button-border solid darken($rb-button-disabled-bg, $rb-button-contrast-level); }
            
            &.rb-gradient {
                @include rb-gradient($rb-button-disabled-bg);

                &:hover {
                    @include rb-gradient(darken($rb-button-disabled-bg, $rb-button-contrast-level));
                }
                
               &.rb-dark {
                    @include rb-gradientDark($rb-button-disabled-bg);

                    &:hover {
                        @include rb-gradientDark(darken($rb-button-disabled-bg, $rb-button-contrast-level));
                        color: lighten($rb-button-disabled-color, $rb-button-contrast-level/2);
                    }
                }
            }
        }
    }
    
    &.rb-buttons,
    .rb-buttons {
        
        &.rb-button,
        .rb-button {
            float: left;
            border-radius: $rb-buttons-radius-middle;
            
            &:first-of-type {
                border-top-left-radius: $rb-buttons-radius-first;
                border-bottom-left-radius: $rb-buttons-radius-first;
            }
            
            &:last-of-type {
                border-top-right-radius: $rb-buttons-radius-last;
                border-bottom-right-radius: $rb-buttons-radius-last;
            }
            
            &.rb-square { border-radius: $rb-button-radius-square; }
        }
        
        &.rb-right { float: right; }
         
        &.rb-two {
            
            .rb-button { width: 50%; }        
        }
        
        &.rb-three {
            
            .rb-button { width: 33.33%; }        
        }
        
        &.rb-four {
            
            .rb-button { width: 25%; }        
        }
        
        &.rb-five {
            
            .rb-button { width: 20%; }        
        }
        
        &.rb-six {
            
            .rb-button { width: 16.66%; }        
        }
        
        &.rb-seven {
            
            .rb-button { width: 14.28%; }        
        }
        
        &.rb-eight {
            
            .rb-button { width: 12.5%; }        
        }
        
        &.rb-nine {
            
            .rb-button { width: 11.1%; }        
        }
        
        &.rb-ten {
            
            .rb-button { width: 10%; }        
        }
        
        &.rb-eleven {
            
            .rb-button { width: 9.09%; }        
        }
        
        &.rb-twelve {
            
            .rb-button { width: 8.33%; }        
        }
        
        &.rb-two .rb-button, &.rb-three .rb-button,
        &.rb-four .rb-button, &.rb-five .rb-button,
        &.rb-six .rb-button, &.rb-seven .rb-button,
        &.rb-eight .rb-button, &.rb-nine .rb-button,
        &.rb-ten .rb-button, &.rb-eleven .rb-button,
        &.rb-twelve .rb-button {
            padding: 10px auto;
            
            &:first-of-type { clear: left; }
            &:last-of-type { clear: right; }
           
        }
    }
}