/*==================================================
  Buttons
==================================================== */


// Base styles
// --------------------------------------------------
.btn {
    display: inline-block;
    margin-bottom: 0; // For input.btn
    font-weight: @btn-font-weight;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
    border: 1px solid transparent;
    border-color: rgba(0, 0, 0, 0.0);
    white-space: nowrap;
    .button-size(@padding-base-vertical;
    @padding-base-horizontal;
    @font-size-base;
    @line-height-base;
    @border-radius-small);
    .user-select(none);
    &, &:active, &.active {
        &:focus {
            .tab-focus();
        }
    }
    &:hover,
    &:focus {
        color: @btn-default-color;
        text-decoration: none;
    }
    &:active,
    &.active {
        outline: 0;
        background-image: none;
        .box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        cursor: not-allowed;
        pointer-events: none; // Future-proof disabling of clicks
        .opacity(.65);
        .box-shadow(none);
    }
    &.btn-gradient {
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
        border-color: rgba(0, 0, 0, 0.07) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.18);
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
        background-repeat: repeat-x;
        background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 1%, rgba(255, 255, 255, 0.15) 100%);
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 1%, rgba(255, 255, 255, 0.15) 100%);
      //  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#00ffffff', GradientType=0);
    }
    &.btn-rounded {
        border-radius: 20px;
    }

}

// Link buttons
// -------------------------
// Make a button look and behave like a link
.btn-link {
    color: @link-color;
    font-weight: normal;
    cursor: pointer;
    border-radius: 0;
    &, &:active, &[disabled], fieldset[disabled] & {
        background-color: transparent;
        .box-shadow(none);
    }
    &,
    &:hover,
    &:focus,
    &:active {
        border-color: transparent;
    }
    &:hover,
    &:focus {
        color: @link-hover-color;
        text-decoration: underline;
        background-color: transparent;
    }
    &[disabled],
    fieldset[disabled] & {
        &:hover, &:focus {
            color: @btn-link-disabled-color;
            text-decoration: none;
        }
    }
}
// Button Sizes
// --------------------------------------------------
.btn-lg {
    // line-height: ensure even-numbered height of button next to large input
    .button-size(@padding-large-vertical;
    @padding-large-horizontal;
    @font-size-large;
    @line-height-large;
    @border-radius-large);
}
.btn-sm {
    // line-height: ensure proper height of button next to small input
    .button-size(@padding-small-vertical;
    @padding-small-horizontal;
    @font-size-small;
    @line-height-small;
    @border-radius-small);
}
.btn-xs {
    .button-size(@padding-xs-vertical;
    @padding-xs-horizontal;
    @font-size-small;
    @line-height-small;
    @border-radius-small);
}


// Block button
// --------------------------------------------------
.btn-block {
    display: block;
    width: 100%;
}
// Vertically space out multiple block buttons
.btn-block + .btn-block {
    margin-top: 5px;
}
// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
    &.btn-block {
        width: 100%;
    }
}


// Alt Btns - white buttons with thick left border
// --------------------------------------------------
// default alt btns
.btn.btn-alt {
    position: relative;
    padding: 7px 11px;
    margin: 5px 3px;
    color: #999;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    background-color: #fbfbfb;
    border-radius: 1px;
    border: 1px solid #EEE;
    border-left: 4px solid #EEE;
    -webkit-transition: opacity 0.1s ease;
    transition: opacity 0.1s ease;
}
.btn.btn-alt.item-active,
.btn.btn-alt:hover,
.btn.btn-alt:focus {
    color: #666 !important;
    background-color: #fefefe !important;
}
// alt btns with gradient (set via .btn-gradient)
.btn.btn-alt.btn-gradient {
    background-color: #f0f0f0;
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.3) 100%);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.3) 100%);
    //filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#00ffffff', GradientType=0);
    border-color: rgba(0, 0, 0, 0.07) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.14);
    border-left: 4px solid #DDD;
}
.btn.btn-alt.btn-gradient:hover,
.btn.btn-alt.btn-gradient:focus {
    background-color: #eee;
}

.btn.btn-alt.item-checked {
    opacity: 1;
    color: #666;
    border-left-color: @brand-success !important;
    transition: all 0.2s ease;
}


// Holder Style - applies a placeholder like style to the element
// --------------------------------------------------
.holder-style {
    display: block;
    padding: 9px 16px;
    color: #AAA;
    background-color: #f1f1f1;
    outline: 2px dashed #d9d9d9;
    border: 0;
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    transition: all 0.15s ease;
}
// holder states
.holder-style:hover,
.holder-style:focus {
    cursor: pointer;
    color: #777;
    background-color: #EEE;
    outline: 2px dashed #aaa;
    border: 0;
    text-decoration: none;
}
// active holder item
.holder-style.holder-active {
    background-color: #FFF;
    outline-color: @brand-success;
}
// holder icon
.holder-style .holder-icon {
    color: #AAA;
    font-size: 30px;
    padding-bottom: 10px;
}
// holder icon states and active
.holder-style:hover .holder-icon,
.holder-style:focus .holder-icon,
.holder-style.holder-active .holder-icon {
    color: @brand-success;
}


// Button Hover Effects 
// ------------------------------------------------

// '.btn-dimmer' - Dims all child btn except active & :hover btns
.btn-dimmer.btn,
.btn-dimmer .btn {
    opacity: 0.5;
}
.btn-dimmer.btn:hover,
.btn-dimmer .btn:hover,
.btn-dimmer.btn.item-active,
.btn-dimmer .btn.item-active {
    opacity: 1;
}