.btn
{
    border: $btn_border_sizepx solid;
    -moz-border-radius: $btn_border_radiuspx;
    -webkit-border-radius: $btn_border_radiuspx;
    border-radius: $btn_border_radiuspx;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    /* for non-anchor elements */
    cursor: pointer;

    display: inline-block;

    /* needed for elems whose font is set by UA's (e.g. submit buttons)*/
    font: $btn_font_sizepx/$btn_line_heightpx $btn_font_family;
    font-weight: bold;

    padding: 0 $btn_padding_leftpx;

    /* !important for a:hover */
    text-decoration: none !important;

    -moz-transition: background-color $btn_transition_durations,
                border-color $btn_transition_durations;
    -o-transition: background-color $btn_transition_durations,
                border-color $btn_transition_durations;
    -webkit-transition: background-color $btn_transition_durations,
                border-color $btn_transition_durations;
    transition: background-color $btn_transition_durations,
                border-color $btn_transition_durations;
}

.btn--black,
.btn--black-hover:focus,
.btn--black-hover:hover
{
    background-color: $btn_black_background;
    border-color: $btn_black_border_color;
    color: $btn_black_color;
}

.btn--block
{
    display: block; /* reset .btn */

    /* Some elems (i.e. button) do not expand fully w/ display: block.
       We think UA defaults are the cause.
    */
    width: 100%;
}

.btn--blue/*,*/
/*.btn--blue-hover:focus,*/
/*.btn--blue-hover:hover*/
{
    background-color: $btn_blue_background;
    border-color: $btn_blue_border_color;
    color: $btn_blue_color;
}

    .btn--blue-inverse/*,*/
    /*.btn--blue-inverse-hover:focus,*/
    /*.btn--blue-inverse-hover:hover*/
    {
        background-color: $btn_blue_color;
        border-color: $btn_blue_border_color; 
        color: $btn_blue_background;
    }

.btn--min-height
{
    min-height: $btn_heightpx;   
}

.btn--min-width
{
    min-width: $btn_min_widthpx;   
}

.btn--navy,
.btn--navy-hover:focus,
.btn--navy-hover:hover
{
    background-color: $btn_navy_background;
    border-color: $btn_navy_border_color;
    color: $btn_navy_color;
}

.btn--navy-inverse/*,*/
/*.btn--navy-inverse-hover:focus,*/
/*.btn--navy-inverse-hover:hover*/
{
    background-color: $btn_navy_color;
    border-color: $btn_navy_border_color; 
    color: $btn_navy_background;
}

.btn--plain
{
    background: none;
    border: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.btn--short
{
    line-height: $btn_line_height_shortpx;
}

.btn--sibling
{
    margin: $btn_sibling_offset_top_em $btn_sibling_offset_left_em;
}