@btn-default-color:#38E;
@btn-default-background-color:#FFF;

// Button theme {{_themeName}}
//
// Generated with config: <i>{{{_description}}}</i>
//
// .btn-theme-{{_themeName}} - Normal state style.
// .btn-theme-{{_themeName}}.btn-state-hover - Hover state style.
// .btn-theme-{{_themeName}}.btn-state-active - Active state style.
// .btn-theme-{{_themeName}}.btn-primary - Primary button style.
// .btn-theme-{{_themeName}}.btn-disabled - Disabled style.
//
// Markup:
// <a href="javascript:void(0)" class="btn-theme-{{_themeName}} {$modifiers}">Anchor button</a>
// <button class="btn-theme-{{_themeName}} {$modifiers}">Button button</button>
// <input type='submit' class="btn-theme-{{_themeName}} {$modifiers}" value="Submit button"/>
//
// Styleguide {{_guideIndex}}.{{_themeIndex}}

.btn-theme-{{_themeName}}(@color:@btn-default-color;
@background-color:@btn-default-background-color;){
    border-width:1px;
    border-style:solid;
    display:inline-block;
    font-size:inherit;
    text-decoration:none;
    font-family: inherit;
    cursor:pointer;
    outline: none;
    {{#if borderRadius}}border-radius:{{borderRadius}};{{/if}}
    border-color:@color;
    color:@color;
    background-color:@background-color;
    {{#if fontWeight}}
    font-weight:{{fontWeight}};
    border-width:2px;
    {{/if}}
    padding:.25em .5em;
    &.btn-state-hover,
    &:hover{
        @hoverColor:lighten(@color, 12);
        color:@hoverColor;
        border-color:@hoverColor;
        text-decoration:none;
    }
    &.btn-state-active,
    &:active{
        background-color: darken(@background-color, 2);
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5) inset;
    }
    &.btn-primary{
        @primary-color:contrast(@color, @color, @background-color, 50%);
        @primary-background-color:contrast(@background-color, @color, @background-color, 50%);
        color:@primary-color;
        background-color:@primary-background-color;

        &:hover{
            color:@primary-color;
            background-color:lighten(@primary-background-color, 5);
        }
        &:active{
            background-color:darken(@primary-background-color, 5);
        }
    }
    &.btn-disabled,
    &.btn-disabled&:hover,
    &.btn-disabled&:active{
        opacity:0.5;
        outline:none;
        cursor:default;
        color:@color;
        background-color:@background-color;
    }
}

.btn(@color;@background-color;){
    .btn-theme-{{_themeName}}(@color;@background-color;);
}