/*
 * Buttons
 */

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

.baseButtonStyles() {
    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, &:focus {
        background: darken(@button_color, 30%, relative);
    }

    i {
        padding-left: 10px;
    }

    &.buttonSmall {
        .rems(13);
    }

    &.buttonLarge {
        .rems(22)
    }

    &[disabled] {
        opacity: 0.5;
    }

    &.buttonPrimary {
        .buttonStyle();
    }

    &.buttonSecondary {
        .buttonStyle(@secondary_color);
    }

    &.buttonDark {
        .buttonStyle(@dark_color);
    }

    &.buttonLight {
        .buttonStyle(@light_color);
    }

    &.buttonAlert {
        .buttonStyle(@alert_color);
    }

    &.buttonSuccess {
        .buttonStyle(@success_color);
    }

    &.buttonInformation {
        .buttonStyle(@information_color);
    }

    &.buttonMed {
        .buttonStyle(@med_color);
    }

    &.buttonMtc {
        .buttonStyle(@mtc_blue);
    }
}

/*
 * Button Groups
 */

.buttonGroup {
    .clearfix();
    float: left;
    width: 100%;
    clear: both;

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

.buttonInline {
    float: left;
    width: 100%;

    .inputWrap {
        width: 70%;
    }

    button, .button, .buttonActive {
        width: 30%;
        padding: 9px 10px;
        line-height: normal;
    }

    @media @mobile {
        width: 100%;
        padding: 0;

        .inputWrap {
            width: 100%;
            margin: 0 0 20px;
            padding: 0;
        }

        button, .button {
            width: 100%;
        }
    }
}

/*
 * Button Styling
 */

.buttonStyle(@background: @primary_color) {
    background: @background;
    border: 1px solid @background;

    &.buttonOutline {
        background: transparent;
        color: @background;
        border-color: @background;
        transition: all 0.5s;

        &:hover, &:focus {
            border-color: @background;
            background: @background;
            color: #fff;
        }
    }

    &:hover, &:focus {
        background: darken(@background, 30%, relative);
        border-color: darken(@background, 30%, relative);
    }
}

.button {
    .baseButtonStyles();
}
