@mixin generic-btn-primary($color, $background) {
    color: $color;
    background-color: whiten($background, .1);
    text-shadow: 1px 1px 0 blacken($background, .2);
}

@mixin generic-btn-secondary($color, $background) {
    color: whiten($color, .1);
    border: 1px solid whiten($color, .1);
    background-color: $background;
    text-shadow: none;
}

%generic-btn-code {
    @include border-radius(3);
    font-size: 14px !important;
    font-size: 1.4rem !important;
    cursor: pointer;
    text-decoration: none !important;
    vertical-align: middle;
    outline: 0;
    overflow: visible;
    border: none;
    display: inline-block;
    line-height: 2.5;
    padding: 0 15px;
    font-weight: normal;
    font-style: normal;
    text-align: center;
    height: 35px;
    @include generic-btn-primary(white(), $uiClickableActiveBg);
    &.btn-secondary {
        @include generic-btn-secondary($uiClickableActiveBg, $uiGeneralContentBg);
        line-height: 2.3;
    }
    &.small {
        line-height: 1.8;
        height: 25px;
        &.btn-secondary {
            line-height: 1.5;
        }
        [class^="icon-"], [class*=" icon-"] {
            @include font-size(13);
        }
    }
    [class^="icon-"], [class*=" icon-"] {
        font: tao !important;
        font-family:tao;
        @include font-size(14);
        line-height: 1;
        padding: 0 9px 0 0;
        position: relative;
        top: 1px;
        left: -1px;
        text-shadow: 0 1px 0 black(.1);
        &.r {
            padding: 0 0 0 9px;
        }
    }
    &:hover {
        opacity: .85;
    }
    &.btn-info {
        @include generic-btn-primary(white(), $info);
        &.btn-secondary {
            @include generic-btn-secondary($info, $uiGeneralContentBg);
        }
    }
    &.btn-error {
        @include generic-btn-primary(white(), $error);
        &.btn-secondary {
            @include generic-btn-secondary($error, $uiGeneralContentBg);
        }
    }

    &.btn-success {
        @include generic-btn-primary(white(), $success);
        &.btn-secondary {
            @include generic-btn-secondary($success, $uiGeneralContentBg);
        }
    }

    &.btn-warning {
        @include generic-btn-primary(white(), $warning);
        &.btn-secondary {
            @include generic-btn-secondary($warning, $uiGeneralContentBg);
        }
    }
}

// this construction was needed to avoid problems with extending this code elsewhere
[class^="btn-"], [class*=" btn-"], .btn-default,
button, input[type="submit"], input[type="reset"] {
    @extend %generic-btn-code;
}

/* todo move to main ? */
.disabled, button[disabled] {
    // !important is required here to overwrite any other inherited rule no matter the specificity,
    // as the disabled style must be consistent all across the stylesheet
    background-color: whiten($websiteBorder, .3) !important;
    text-shadow: 1px 1px 0 white(.8) !important;
    cursor: not-allowed !important;
    opacity: .55 !important;
    color: #000 !important;
    border: none !important;
}

// jquery ui
.ui-button {
    [class^="icon-"], [class*=" icon-"] {
        font-family: tao !important;
    }
}