/* ------------------------------------------------------------------------------
 *
 *  # Button component
 *
 *  Overrides for button bootstrap component
 *
 * ---------------------------------------------------------------------------- */

// Button base
.btn {
    position: relative;
    text-transform: uppercase;

    // Remove ugly dotted border in FF
    &::-moz-focus-inner {
        border: 0;
    }

    // Disabled state
    &.disabled,
    &:disabled {
        cursor: $cursor-disabled;
    }
}

// Light button overrides
.btn-light {
    @include button-variant($light, transparent);
}


//
// Alternate buttons
//

// Link buttons
.btn-link {
    font-weight: $btn-font-weight;

    // Opened dropdown
    .show > &.dropdown-toggle {
        color: $link-hover-color;
    }
}

// Button with icon only
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: add((($btn-padding-y * 2) + $line-height-computed), ($btn-border-width * 2));
    height: add((($btn-padding-y * 2) + $line-height-computed), ($btn-border-width * 2));

    // Icon
    > i {
        position: static;
        min-width: $icon-font-size;
    }

    // Checkbox and radio
    input[type=checkbox],
    input[type=radio] {
        display: block;
    }

    // Sizes
    &.btn-sm {
        width: add((($btn-padding-y-sm * 2) + $line-height-computed), ($btn-border-width * 2));
        height: add((($btn-padding-y-sm * 2) + $line-height-computed), ($btn-border-width * 2));
    }
    &.btn-lg {
        width: add((($btn-padding-y-lg * 2) + $line-height-computed), ($btn-border-width * 2));
        height: add((($btn-padding-y-lg * 2) + $line-height-computed), ($btn-border-width * 2));
    }
}

// Float button
.btn-float {
    padding: $btn-float-padding;
    @include border-radius($btn-border-radius);

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

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

    // Text
    > span {
        display: block;
        padding-top: ($spacer / 2);
        margin-bottom: -($font-size-base / 2);
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

// Buttons with strong border
.btn {
    &.border-2 {
        padding-top: ($btn-padding-y - rem-calc($border-width));
        padding-bottom: ($btn-padding-y - rem-calc($border-width));

        // Sizes
        &.btn-lg {
            padding-top: ($btn-padding-y-lg - rem-calc($border-width));
            padding-bottom: ($btn-padding-y-lg - rem-calc($border-width));
        }
        &.btn-sm {
            padding-top: ($btn-padding-y-sm - rem-calc($border-width));
            padding-bottom: ($btn-padding-y-sm - rem-calc($border-width));
        }

        // Icon button
        &.btn-icon {
            width: add((($btn-padding-y * 2) + $line-height-computed), ($btn-border-width * 4));
            height: add((($btn-padding-y * 2) + $line-height-computed), ($btn-border-width * 4));

            // Sizes
            &.btn-sm {
                width: add((($btn-padding-y-sm * 2) + $line-height-computed), ($btn-border-width * 4));
                height: add((($btn-padding-y-sm * 2) + $line-height-computed), ($btn-border-width * 4));
            }
            &.btn-lg {
                width: add((($btn-padding-y-lg * 2) + $line-height-computed), ($btn-border-width * 4));
                height: add((($btn-padding-y-lg * 2) + $line-height-computed), ($btn-border-width * 4));
            }
        }

        // Float button
        &.btn-float {
            padding: ($btn-float-padding - rem-calc($border-width));
        }
    }
}

// Icon indication for active state
.btn-active-indicator {
    opacity: 0;
    visibility: hidden;
    transition: opacity ease-in-out $component-transition-timer, visibility ease-in-out $component-transition-timer;

    .btn.active > & {
        opacity: 1;
        visibility: visible;
    }
}


//
// Labeled buttons
//

// Base
.btn-labeled {

    // Icon
    > b {
        position: absolute;
        top: -$btn-border-width;
        background-color: rgba($black, 0.15);
        display: block;
        line-height: 1;
        padding: (($line-height-computed - $icon-font-size) / 2) + $btn-padding-y + rem-calc($btn-border-width);

        // Center icon vertically
        > i {
            top: 0;
        }
    }

    // Rounded icon
    &.rounded-pill {
        > b {
            @include border-radius($rounded-pill);
        }
    }

    // Sizes
    &.btn-lg > b {
        padding: (($line-height-computed-lg - $icon-font-size) / 2) + $btn-padding-y-lg + rem-calc($btn-border-width);
    }
    &.btn-sm > b {
        padding: (($line-height-computed-sm - $icon-font-size) / 2) + $btn-padding-y-sm + rem-calc($btn-border-width);
    }
}

// Left icon
.btn-labeled-left {
    padding-left: ((((($line-height-computed - $icon-font-size) / 2) + $btn-padding-y + rem-calc($btn-border-width)) * 2) + $icon-font-size) + $btn-padding-x;

    // Icon
    > b {
        left: -$btn-border-width;
        @include border-left-radius($btn-border-radius);
    }

    // Sizes
    &.btn-lg {
        padding-left: ((((($line-height-computed-lg - $icon-font-size) / 2) + $btn-padding-y-lg + rem-calc($btn-border-width)) * 2) + $icon-font-size) + $btn-padding-x-lg;

        > b {
            @include border-left-radius($btn-border-radius-lg);
        }
    }
    &.btn-sm {
        padding-left: ((((($line-height-computed-sm - $icon-font-size) / 2) + $btn-padding-y-sm + rem-calc($btn-border-width)) * 2) + $icon-font-size) + $btn-padding-x-sm;

        > b {
            @include border-left-radius($btn-border-radius-sm);
        }
    }
}

// Right icon
.btn-labeled-right {
    padding-right: ((($line-height-computed - $icon-font-size + $btn-padding-y - rem-calc($btn-border-width)) * 2) + $icon-font-size) + $btn-padding-x;

    // Icon
    > b {
        right: -$btn-border-width;
        @include border-right-radius($btn-border-radius);
    }

    // Sizes
    &.btn-lg {
        padding-right: ((((($line-height-computed-lg - $icon-font-size) / 2) + $btn-padding-y-lg + rem-calc($btn-border-width)) * 2) + $icon-font-size) + $btn-padding-x-lg;

        > b {
            @include border-right-radius($btn-border-radius-lg);
        }
    }
    &.btn-sm {
        padding-right: ((((($line-height-computed-sm - $icon-font-size) / 2) + $btn-padding-y-sm + rem-calc($btn-border-width)) * 2) + $icon-font-size) + $btn-padding-x-sm;

        > b {
            @include border-right-radius($btn-border-radius-sm);
        }
    }
}