.button(
    @color        : @button-primary-color;
    @background   : @button-primary-bg;
    @border       : softlight(@background, #000);
    @border-width : @button-border-width;
    @radius       : @button-border-radius
) {
    text-align      : center;
    cursor          : pointer;
    text-decoration : none;
    height          : auto;
    line-height     : unit(@button-line-height * 2, em);
    padding         : .5em 2.675em;
    font-family     : @font-family-text;
    .inline-block();
    .button-color(@color; @background; @border);
    .border-radius(@radius);
    .user-select();
    .box-shadow(0 6px 6px -3px #ecd4d4);
    & when (@border-width > 0) {
        border-width : @border-width;
        border-style : solid;
    }
    & when (@border-width = 0), (@border-width = none) {
        border : none;
    }
    & when (@button-transition) {
        .transition(background 0.3s);
    }
    & when not(@button-transition) {
        .transition(none);
    }

    &:active, &.active {
        .box-shadow(2px 2px 4px rgba(0, 0, 0, .3) inset; @button-box-shadow);
    }
}

// Button size
//==================================================
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.link-color(@color : @link-color; @color-hover : darken(@color, 30%)) {
    color : @color;

    &:hover {
        color : @color-hover;
    }
}
.button-color(
    @color;
    @background;
    @border      : softlight(extract(@background, 1), #000);
    @color2      : extract(@color, 1);
    @background2 : darken(extract(@background, 1), 10%);
    @border2     : darken(extract(@border, 1), 10%)
) {
    color            : extract(@color, 1);
    border-color     : extract(@border, 1);
    background-color : extract(@background, 1);

    &:hover, &:active, &.active {
        & when (length(@color) = 1) {
            color : @color2;
        }
        & when (length(@color) = 2) {
            color : extract(@color, 2);
        }
        & when (length(@border) = 1) {
            border-color : @border2;
        }
        & when (length(@border) = 2) {
            border-color : extract(@border, 2);
        }
        & when (length(@background) = 1) {
            background-color : @background2;
        }
        & when (length(@background) = 2) {
            background-color : extract(@background, 2);
        }
    }
}

// Button height
//==================================================
@button-height-ems : unit(@button-line-height * 2, em);

@button-height-larger : unit(@font-size-larger * @font-size-base * 2.5, px);
@button-height-large  : unit(@font-size-large * @font-size-base * 2.5, px);
@button-height-base   : unit(@font-size-base * 2.5, px);
@button-height-small  : unit(@font-size-small * @font-size-base * 2.5, px);