@button_color: @highlight_color;
@button_alt_color: @dark_color;

/*
 * Button Styling
 */
.button {
    position: relative;
    display: inline-block;
    background: @button_color;
    margin: 0 0 20px;
    padding: 12px 20px 10px;
    cursor: pointer;
    text-align: center;
    border: 0;
    outline: none;
    text-transform: uppercase;
    font-family: @primary_font;
    letter-spacing: 0.45px;
    color: #fff;
    line-height: 1;
    font-weight: 600;
    .rems(18);
    transition: background-color 0.5s;
    border-radius: @border_radius;
    text-decoration: none;

    &:hover {
        background: darken(@button_color, 30%, relative);
    }

    i {
        padding-left: 10px;
    }

    &.buttonSmall {
        .rems(13);
    }

    &.buttonLarge {
        .rems(22)
    }

    &[disabled] {
        opacity: 0.5;
    }
}

.buttonAlt {
    .button();
    background: @dark_color;
    border: 0;
    color: @light_text_color;
    transition: background 0.3s;

    &:hover {
        background: lighten(@dark_color, 10%);
    }
}

.buttonActive {
    position: relative;
    padding: 12px 35px 12px 20px;
    transition: padding 0.5s ease-in, background 0.5s ease-in;

    &:after {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: inherit;
        .fa(f105, #fff);
        .rems(20);
    }

    &.busy {
        padding: 12px 45px 12px 20px;
        .rems(18);

        &:after {
            position: absolute;
            top: 13px;
            right: 20px;
            .rems(16);
            .fa(f021, #fff);
            animation: fa-spin 2s infinite linear;
        }
    }
}

/*
 * Button Groups
 */
.buttonGroup {
    .clearfix();
    float: left;
    width: 100%;
    clear: both;

    .button {
        float: left;
        display: block;
        margin-right: 20px;
    }
}