// A simple button object.

// Predefine the variables below in order to alter and enable specific features.
$btn-padding:         halve($base-spacing-unit) !default;
$btn-padding--small:  halve($btn-padding) !default;
$btn-padding--large:  double($btn-padding) !default;
$btn-background:      #4a8ec2 !default;
$btn-color:           #fff !default;
$btn-border-width:    1px !default;
$btn-border-style:    solid !default;
$btn-border-color:    $btn-background !default;
$btn-radius:          0 !default;

$enable-btn--small:   false !default;
$enable-btn--large:   false !default;
$enable-btn--full:    false !default;
$enable-btn--pill:    false !default;





// Here we set a variable assuming that `box-sizing: border-box;` is not set
// globally. If it has been previously been defined, the following variable will
// be overriden and will be set to `true`.
$global-border-box: false !default;






  // 1. Allow us to style box model properties.
  // 2. Line different sized buttons up a little nicer.
  // 3. Make buttons inherit font styles (often necessary when styling `input`s as
  //    buttons).
  // 4. Reset/normalize some styles.
  // 5. Force all button-styled elements to appear clickable.
  // 6. Fixes odd inner spacing in IE7.
  // 7. Subtract the border size from the padding value so that buttons do not
  //    grow larger as we add borders.
 
.#{$namespace}btn,
%#{$namespace}btn {
    display: inline-block; // [1] 
    vertical-align: middle; // [2]
    font: inherit; // [3]
    text-align: center; // [4]
    border: none; // [4]
    margin:  0; // [4]
    cursor: pointer; // [5]
    overflow: visible; // [6]
    padding: $btn-padding - $btn-border-width  double($btn-padding) - $btn-border-width; // [7]
    background-color: $btn-background;

    @if($btn-border-width != 0) {
        border: $btn-border-width $btn-border-style $btn-border-color;
    }

    @if($btn-radius != 0) {
        border-radius: $btn-radius;
    }

    &,
    &:hover,
    &:active,
    &:focus {
        text-decoration: none; // [4]
        color: $btn-color;
    }

}

// Fix a Firefox bug whereby `input type="submit"` gains 2px extra padding.
.#{$namespace}btn::-moz-focus-inner,
%#{$namespace}btn::-moz-focus-inner {
    border:  0;
    padding: 0;
}





@if ($enable-btn--small == true) {

    // Small buttons.

    .#{$namespace}btn--small,
    %#{$namespace}btn--small {
        padding: $btn-padding--small - $btn-border-width  double($btn-padding--small) - $btn-border-width; /* [7] */
    }

}

@if ($enable-btn--large == true) {

    // Large buttons.

    .#{$namespace}btn--large,
    %#{$namespace}btn--large {
        padding: $btn-padding--large - $btn-border-width  double($btn-padding--large) - $btn-border-width; /* [7] */
    }

}





@if ($enable-btn--full == true) {

    // Full-width buttons.

    .#{$namespace}btn--full,
    %#{$namespace}btn--full {
        width: 100%;

        @if $global-border-box == false {

            // Remove paddings so that widths and paddings don't conflict.
            padding-right: 0;
            padding-left:  0;
        }

    }

}





@if ($enable-btn--pill == true) {

     //
     // Round-ended buttons.
     //
     // 1. Overly-large value to ensure the radius rounds the whole end of the
     //    button.
     //

    .#{$namespace}btn--pill,
    %#{$namespace}btn--pill {
        border-radius: 100px; // [1]
    }

}