/* ------------------------------------------------------------------------------
*
*  # Buttons component
*
*  Overrides for buttons bootstrap component
*
*  Version: 1.0
*  Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */


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

.btn {
    position: relative;
    border-radius: @border-radius-small;

    // Remove outline
    &,
    &:active,
    &.active {
        &:focus,
        &.focus {
            outline: 0;
        }
    }

    // Firefox fix
    &::-moz-focus-inner {
        border: 0;
    }

    // Hover state
    &:hover,
    &:focus,
    &.focus {
        .box-shadow(0 0 0 100px fade(#000, 5%) inset); // Use box shadow instead of color for all buttons - contextual and custom
    }

    // Active state
    &:active,
    &.active {
        .box-shadow(0 0 0 100px fade(#000, 10%) inset); // The same as above - no color changes, only box shadow
    }

    // Custom color buttons
    &[class*=bg-] {
        &:hover,
        &:focus,
        &.focus {
            color: #fff;
        }
    }

    // Correct line heights in smaller text sizes
    &.text-size-small {
        line-height: @line-height-small;
    }
    &.text-size-mini {
        line-height: @line-height-mini;
    }
}


// Button styling
// -------------------------

// Default button
.btn-default {

    // Hover/focus states
    &:hover,
    &:focus,
    &.focus {
        .box-shadow(0 0 0 100px fade(#000, 1%) inset); // Use box shadow instead of color for all buttons - contextual and custom
    }

    // Active state
    &:active,
    &.active {
        .box-shadow(0 0 0 100px fade(#000, 2%) inset); // The same as above - no color changes, only box shadow
    }
}

// Labeled button
.btn-labeled {
    padding-left: (((@padding-base-horizontal * 3) + @icon-font-size) - 4); // Tripple horizontal padding + extra 5 pixels + border

    // Default button
    &.btn-default {
        > b {
            background-color: @brand-primary;
            color: #fff;
        }
    }

    // Icon
    > b {
        position: absolute;
        top: -1px;
        left: -1px;
        background-color: fade(#000, 15%);
        display: block;
        .button-size(@padding-base-vertical + 1; @padding-base-horizontal - 2; @font-size-base; @line-height-base; 0);
    }

    // Right icon
    &.btn-labeled-right {
        padding-left: @padding-base-horizontal;
        padding-right: (((@padding-base-horizontal * 3) + @icon-font-size) - 4);

        > b {
            left: auto;
            right: -1px;
        }
    }

    // Extra large
    &.btn-xlg {
        padding-left: (((@padding-xlarge-horizontal * 3) + @icon-font-size) - 6);

        > b {
            .button-size(@padding-xlarge-vertical + 1; @padding-xlarge-horizontal - 3; @font-size-large; @line-height-large; 0);
        }

        &.btn-labeled-right {
            padding-left: @padding-large-horizontal;
            padding-right: (((@padding-xlarge-horizontal * 3) + @icon-font-size) - 6);
        }
    }

    // Large
    &.btn-lg {
        padding-left: (((@padding-large-horizontal * 3) + @icon-font-size) - 6);

        > b {
            .button-size(@padding-large-vertical + 1; @padding-large-horizontal - 3; @font-size-large; @line-height-large; 0);
        }

        &.btn-labeled-right {
            padding-left: @padding-large-horizontal;
            padding-right: (((@padding-large-horizontal * 3) + @icon-font-size) - 6);
        }
    }

    // Small
    &.btn-sm {
        padding-left: (((@padding-small-horizontal * 3) + @icon-font-size) - 4);

        > b {
            .button-size(@padding-small-vertical + 1; @padding-small-horizontal - 2; @font-size-small; @line-height-small; 0);
        }

        &.btn-labeled-right {
            padding-left: @padding-small-horizontal;
            padding-right: (((@padding-small-horizontal * 3) + @icon-font-size) - 4);
        }
    }

    // Mini
    &.btn-xs {
        padding-left: (((@padding-xs-horizontal * 3) + @icon-font-size) - 4);

        > b {
            .button-size(@padding-xs-vertical + 1; @padding-xs-horizontal - 2; @font-size-small; @line-height-small; 0);
        }

        &.btn-labeled-right {
            padding-left: @padding-xs-horizontal;
            padding-right: (((@padding-xs-horizontal * 3) + @icon-font-size) - 4);
        }
    }
}

// Flat button
.btn-flat {
    border-width: 2px;
    background-color: transparent;

    // Hover/focus states
    &:hover,
    &:focus {
        .opacity(0.8);
        .box-shadow(none);
    }

    // Active state
    &:active {
        .opacity(0.95);
    }

    // Remove shadow in open dropdown button
    .btn-group.open .dropdown-toggle& {
        .box-shadow(none);
    }
}

// Icon button
.btn-icon {
    padding-left: @padding-base-vertical + 2;
    padding-right: @padding-base-vertical + 2;

    &.icon-2x {
        padding-left: @padding-base-vertical;
        padding-right: @padding-base-vertical;

        > i {
            font-size: (@icon-font-size * 2);
            top: 0;
        }

        // Sizing
        &.btn-xlg {
            padding-left: @padding-xlarge-vertical;
            padding-right: @padding-xlarge-vertical;
        }
        &.btn-lg {
            padding-left: @padding-large-vertical;
            padding-right: @padding-large-vertical;
        }
        &.btn-sm {
            padding-left: @padding-small-vertical;
            padding-right: @padding-small-vertical;
        }
        &.btn-xs {
            padding-left: @padding-xs-vertical;
            padding-right: @padding-xs-vertical;
        }
    }

    // Sizing
    &.btn-xlg,
    .input-group-xlg > .input-group-btn > & {
        padding-left: @padding-xlarge-vertical + 2;
        padding-right: @padding-xlarge-vertical + 2;
    }
    &.btn-lg,
    .input-group-lg > .input-group-btn > & {
        padding-left: @padding-large-vertical + 2;
        padding-right: @padding-large-vertical + 2;
    }
    &.btn-sm,
    .input-group-sm > .input-group-btn > & {
        padding-left: @padding-small-vertical + 2;
        padding-right: @padding-small-vertical + 2;
    }
    &.btn-xs,
    .input-group-xs > .input-group-btn > .btn& {
        padding-left: @padding-xs-vertical + 2;
        padding-right: @padding-xs-vertical + 2;
    }
}

// Float button
.btn-float {
    padding: @btn-float-padding;
    white-space: normal;
    border-radius: @border-radius-base;

    // Transparent button
    &.btn-link {
        padding: (@btn-float-padding - 5);
    }

    // Icon
    i {
        display: block;
        margin: 0;
        top: 0;
    }

    // Text
    > span {
        display: block;
        padding-top: (@line-height-computed / 2);
        margin-bottom: -((@line-height-computed / 2) - 4);
    }

    // Double icon size in large button
    &.btn-float-lg i {
        font-size: (@icon-font-size * 2);
    }
}

// Link button
.btn-link {
    color: @text-color;

    // Remove shadows
    &,
    &:hover,
    &:focus,
    &:active {
        .box-shadow(none);
    }
}

// Rounded button
.btn-rounded {
    &,
    &.btn-labeled > b {
        border-radius: 100px;
    }
}

// Block button
.btn-block + .btn-block {
    margin-top: (@line-height-computed / 2);
}


// Contextual classes.
// Override all styles
// to avoid BS mixin changes
// -------------------------

// Default appears as lighter grey
.btn-default {
    &:focus,
    &.focus,
    &:hover {
        background-color: @btn-default-bg;
        border-color: @btn-default-border;
    }
    &:active,
    &.active,
    .open > .dropdown-toggle& {
        background-color: @btn-default-bg;
        border-color: @btn-default-border;

        &:hover,
        &:focus,
        &.focus {
            background-color: @btn-default-bg;
            border-color: @btn-default-border;
        }
    }
    &.disabled {
        .box-shadow(none);
    }
}

// Primary appears as blue
.btn-primary {
    &:focus,
    &.focus,
    &:hover {
        background-color: @btn-primary-bg;
        border-color: @btn-primary-border;
    }
    &:active,
    &.active,
    .open > .dropdown-toggle& {
        background-color: @btn-primary-bg;
        border-color: @btn-primary-border;

        &:hover,
        &:focus,
        &.focus {
            background-color: @btn-primary-bg;
            border-color: @btn-primary-border;
        }
    }
    &.disabled {
        .box-shadow(none);
    }
}

// Success appears as green
.btn-success {
    &:focus,
    &.focus,
    &:hover {
        background-color: @btn-success-bg;
        border-color: @btn-success-border;
    }
    &:active,
    &.active,
    .open > .dropdown-toggle& {
        background-color: @btn-success-bg;
        border-color: @btn-success-border;

        &:hover,
        &:focus,
        &.focus {
            background-color: @btn-success-bg;
            border-color: @btn-success-border;
        }
    }
    &.disabled {
        .box-shadow(none);
    }
}

// Info appears as light blue
.btn-info {
    &:focus,
    &.focus,
    &:hover {
        background-color: @btn-info-bg;
        border-color: @btn-info-border;
    }
    &:active,
    &.active,
    .open > .dropdown-toggle& {
        background-color: @btn-info-bg;
        border-color: @btn-info-border;

        &:hover,
        &:focus,
        &.focus {
            background-color: @btn-info-bg;
            border-color: @btn-info-border;
        }
    }
    &.disabled {
        .box-shadow(none);
    }
}

// Warning appears as orange
.btn-warning {
    &:focus,
    &.focus,
    &:hover {
        background-color: @btn-warning-bg;
        border-color: @btn-warning-border;
    }
    &:active,
    &.active,
    .open > .dropdown-toggle& {
        background-color: @btn-warning-bg;
        border-color: @btn-warning-border;

        &:hover,
        &:focus,
        &.focus {
            background-color: @btn-warning-bg;
            border-color: @btn-warning-border;
        }
    }
    &.disabled {
        .box-shadow(none);
    }
}

// Danger and error appear as red
.btn-danger {
    &:focus,
    &.focus,
    &:hover {
        background-color: @btn-danger-bg;
        border-color: @btn-danger-border;
    }
    &:active,
    &.active,
    .open > .dropdown-toggle& {
        background-color: @btn-danger-bg;
        border-color: @btn-danger-border;

        &:hover,
        &:focus,
        &.focus {
            background-color: @btn-danger-bg;
            border-color: @btn-danger-border;
        }
    }
    &.disabled {
        .box-shadow(none);
    }
}


// Button size overrides
// -------------------------

// XLarge button
.btn-xlg {
    .button-size(@padding-xlarge-vertical; @padding-xlarge-horizontal; @font-size-large; @line-height-large; @border-radius-base);

    &.btn-rounded {
        border-radius: 100px;
    }
}

// Large button
.btn-lg {
    border-radius: @border-radius-base;

    &.btn-rounded {
        border-radius: 100px;
    }
}

// Small button
.btn-sm {
    line-height: @line-height-base;
    font-size: @font-size-base;
}
