// BUTTON STYLES
// -------------


// Base styles
// --------------------------------------------------

// Core
.btn {
    display: inline-block;
    padding: 4pt 10pt 4pt;
    margin-bottom: 0; // For input.btn
    font-size: @baseFontSize;
    line-height: @baseLineHeight;
    color: @zenburnFg;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: @btnBackground;
    border: 1pt solid @btnBorder;
    border-bottom-color: var(--zenburn-green-1);
    border-radius: 4pt;

    &:active { @btnBackgroundHighlight; }
}

// Hover state
.btn:hover {
    color: @zenburnFgDark;
    text-decoration: none;
    background-color: @bodyBackgroundLight;
}

// Focus state for keyboard and accessibility
.btn:focus {
    .tab-focus();
}

// Active state
.btn.active,
.btn:active {
    background-color: @bodyBackgroundLight;
    outline: 0;
}

// Disabled state
.btn.disabled,
.btn[disabled] {
    cursor: default;
    background-color: @grayLighter;
    .opacity(65);
}


// Button Sizes
// --------------------------------------------------

// Large
.btn-large {
    padding: 9pt 14pt;
    font-size: @baseFontSize + 2pt;
    line-height: normal;
    border-radius: 5pt;
}
.btn-large [class^="icon-"] {
    margin-top: 1pt;
}

// Small
.btn-small {
    padding: 5pt 9pt;
    font-size: @baseFontSize - 2pt;
    line-height: @baseLineHeight - 2pt;
}
.btn-small [class^="icon-"] {
    margin-top: -1pt;
}

// Mini
.btn-mini {
    padding: 2pt 6pt;
    font-size: @baseFontSize - 2pt;
    line-height: @baseLineHeight - 4pt;
}


// Alternate buttons
// --------------------------------------------------

// Set text color
// -------------------------
.btn-primary, .btn-primary:hover,
.btn-warning, .btn-warning:hover,
.btn-danger, .btn-danger:hover,
.btn-success, .btn-success:hover,
.btn-info, .btn-info:hover,
.btn-inverse, .btn-inverse:hover {
    color: @zenburnFg;
}
// Provide *some* extra contrast for those who can get it
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
    color: @zenburnFgLight;
}

// Set the backgrounds
// -------------------------
.btn {
    // reset here as of 2.0.3 due to Recess property order
    border-color: @bodyBackgroundLight;
}
.btn-primary {
    background-color: @btnPrimaryBackground;
    &:active {@btnPrimaryBackgroundHighlight;}
}
// Warning appears are orange
.btn-warning {
    background-color: @btnWarningBackground;
    &:active {@btnWarningBackgroundHighlight;}
}
// Danger and error appear as red
.btn-danger {
    background-color: @btnDangerBackground;
    &:active {@btnDangerBackgroundHighlight;}
}
// Success appears as green
.btn-success {
    background-color: @btnSuccessBackground;
    &:active {@btnSuccessBackgroundHighlight;}
}
// Info appears as a neutral blue
.btn-info {
    background-color: @btnInfoBackground;
    &:active {@btnInfoBackgroundHighlight;}
}
// Inverse appears as dark gray
.btn-inverse {
    background-color: @btnInverseBackground;
    &:active {@btnInverseBackgroundHighlight;}
}