// questhub buttons are based on Bootstrap buttons, but with some significant changes

.btn {
    // copied from bootstrap
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0; // For input.btn
    font-size: $base-font-size;
    line-height: $base-line-height;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    @include user-select(none);
    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214

    transition: background-color 0.2s ease, background-image 0.2 ease, border-bottom-color 0.2s ease;

    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    i {
        margin-right: 2px;
    }

    color: $text-color;
    text-shadow: 0 1px 1px rgba($dark-grey, 0.25);
    &:hover, &:focus {
        color: $text-color;
        text-decoration: none;
    }
    &:active, &.active {
        outline: 0;
        background-image: none;
        @include box-shadow(inset 0 2px 5px rgba(0,0,0,.125));
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        cursor: default;
        pointer-events: none; // Future-proof disabling of clicks
        @include opacity(60);
    }

    // Focus state for keyboard and accessibility
    &:focus {
        @include tab-focus;
    }
}
.btn-mini, .btn-small {
    border-bottom-width: 1px;
}

@mixin btn-colored-inner($color, $hued) {
    background-color: $hued;
    @include gradient-vertical($start-color: $hued, $end-color: darken($hued, 8%));
    border-color: $color;
    border-bottom-color: darken($color, 10%);

    &.disabled, &[disabled], fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            background-color: $hued;
            border-color: $dark-grey;
        }
    }
    &:hover, &:focus, &:active, &.active {
        background-color: darken($hued, 4%);
        @include gradient-vertical($start-color: darken($hued, 4%), $end-color: darken($hued, 12%));
        border-color: darken($color, 5%);
        border-bottom-color: darken($color, 15%);
    }
    &:active, &.active {
        @include gradient-vertical($start-color: darken($hued, 10%), $end-color: darken($hued, 18%));
        border-bottom-color: darken($color, 5%);
    }
}

@mixin btn-colored($color) {
    @include btn-colored-inner(hsl(hue($color), 60%, 70%), hsl(hue($color), 75%, 85%));
}

.btn-default {
    @include btn-colored-inner(darken($grey, 10%), white);
}
.btn-primary {
    @include btn-colored($blue-color);
}
.btn-success {
    @include btn-colored($green-color);
}
.btn-warning {
    @include btn-colored-inner(hsl(50, 60%, 65%), hsl(50, 90%, 80%));
}
.btn-danger {
    @include btn-colored-inner(hsl(1, 60%, 65%), hsl(1, 90%, 80%));
}
.btn-rss {
    @include btn-colored-inner(hsl(35, 35%, 69%), hsl(35, 95%, 60%));
    &, &:hover, &:active {
        color: white;
    }
}

// Block button
// -------------------------
.btn-block {
    display: block;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
// 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%;
  }
}

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

// Large
.btn-large {
    padding: 11px 19px;
    font-size: $base-font-size * 1.25;
    border-radius: 6px;
}
.btn-large [class^="icon-"],
.btn-large [class*=" icon-"] {
    margin-top: 4px;
}

// Small
.btn-small {
    padding: 2px 10px;
    font-size: $base-font-size * 0.85;
    border-radius: 3px;
}
.btn-small [class^="icon-"],
.btn-small [class*=" icon-"] {
    margin-top: 0;
}
.btn-mini [class^="icon-"],
.btn-mini [class*=" icon-"] {
    margin-top: -1px;
}

// Mini
.btn-mini {
    padding: 0 6px;
    font-size: $base-font-size * 0.75;
    border-radius: 3px;
}
