/*

Buttons

Button styles can be applied to anything with the `.btn` class applied.
However, typically you'll want to apply these to only `<a>` and `<button>`
elements for the best rendering.

Markup:
<a href="#" class="btn btn--default {$modifiers}">Link Button</a>
<button class="btn btn--default {$modifiers}">Button Element</button>

:hover - Mouse hover state style, also available with `.hover`
:active - Selected element style, also available with `.active`
.disabled - Disabled state style.

Styleguide 3

*/

@if $buttons {

    .btn {
        @extend %btn !optional;
        @include border-radius($base-border-radius);
        border-style: solid;
        border-width: $input-border;
        cursor: pointer;
        display: inline-block;
        line-height: 1em;
        margin-bottom: 0;
        text-align: center;
        vertical-align: middle;

        &:hover, &.hover, &:focus { text-decoration: none; }

        &.active, &:active {outline: 0; }

        &.disabled, &.disabled:hover,
        &[disabled],&[disabled]:hover {
            @include box-shadow(none);
            @include opacity(65);
            background-image: none;
            cursor: default;
        }
    }

/*

Buttons with Icons

To add an icon to a button (or eny other type of element) just enable the font
(see 27.2), add a class with the name of the font and use the unicode of
the character.

It's not a pretty way of doing it, if you prefer more fine control i suggest
to ditch the icon font integration and use the tools and resources made
available on the fonts sites.

Markup:
<a href="#" class="btn btn--default fontawesome">&#xf02b;</a>
<a href="#" class="btn btn--default fontawesome">&#xf040;</a>
<a href="#" class="btn btn--default fontawesome">&#xf06c;</a>

Styleguide 3.1

*/


/*

Colors

Markup:
<a href="#" class="btn btn--default">Link Button</a>
<a href="#" class="btn btn--primary">Link Button</a>
<a href="#" class="btn btn--secondary">Link Button</a>

Styleguide 3.2

*/

    .btn--default       { @extend %btn--default !optional; }
    .btn--primary       { @extend %btn--primary !optional; }
    .btn--secondary     { @extend %btn--secondary !optional; }

/*

Sizes

Markup:
<a href="#" class="btn btn--default btn--large">Link Button</a>
<a href="#" class="btn btn--default">Link Button</a>
<a href="#" class="btn btn--default btn--small">Link Button</a>
<a href="#" class="btn btn--default btn--mini">Link Button</a>

Styleguide 3.3

*/


    .btn {
        padding: $btn-padding;

        @if $btn-padding == $input-padding {
            height: $input-height;
        }
    }

    .btn--large, .btn--small, .btn--mini {
        height: auto;
    }

    .btn--large {
        @include adjust-font-size-to($h5-size);
        padding: $btn-large-padding;
    }

    .btn--small {
        @include adjust-font-size-to($small-size);
        padding: $btn-small-padding;
    }

    .btn--mini {
        @include adjust-font-size-to($smaller-size);
        padding: $btn-mini-padding;
    }


/*

Modifiers

Create block level buttons—those that span the full width of a parent.

Markup:
<a href="#" class="btn btn--default {$modifiers}">Link Button</a>
<button class="btn btn--default {$modifiers}">Button Element</button>

.btn--block - Create block level buttons—those that span the full width of a parent.
.btn--pill - Button width rounded full corners.
.btn--link - Deemphasize a button by making it look like a link while maintaining button behavior.

Styleguide 3.4

*/

// Block button

    .btn--block {
        display: block;
        width: 100%;
        padding-left: 0;
        padding-right: 0;

        + .btn--block {
            margin-top: rhythm(.5);
        }

    }

// Pill button

    .btn--pill {
        @include border-radius(200px);
    }

/*

Link

Deemphasize a button by making it look like a link while maintaining
button behavior.

Markup:
<a href="#" class="btn btn--link ">Link Button</a>
<button class="btn btn--link">Button Element</button>

Styleguide 3.5

*/


    .btn--link {
        @include border-radius(0);
        border-color: transparent;
        background: none;
        color: $link-color;
        cursor: pointer;

        &:hover, &:focus {
            color: $link-color-hover;
            text-decoration: underline;
            background-color: transparent;
        }

        &:active, &[disabled] {
            background-color: transparent;
            background-image: none;
            @include box-shadow(none);
        }

        &[disabled]:hover, &[disabled]:focus {
            color: $grayDark;
            text-decoration: none;
        }
    }

}