//
// Buttons
// --------------------------------------------------

// Base styles
// --------------------------------------------------
.btn,
.btn-group > .btn,
.btn-group > .dropdown-menu,
.btn-group > .popover {
  font-size: @base-font-size * 1.071; /* 15px */
  font-weight: 500;
}

.btn {
  border: none;
  background: @lightgray;
  color: @button-text;
  padding: 9px 12px 10px;
  line-height: 22px;
  text-decoration: none;
  text-shadow: none;
  .border-radius(6px);
  .box-shadow(none);
  .transition(0.25s);

  // Alternate states
  // --------------------------------------------------
  &:hover,
  &:focus,
  .btn-group:focus &.dropdown-toggle {
    background-color: @button-hover;
    color: @button-text;
    outline: none;
    .transition(0.25s);
  }

  // Active State
  &:active,
  .btn-group.open &.dropdown-toggle,
  &.active {
    background-color: @button-active;
    color: fade(@button-text, 75%);
    .box-shadow(none);
  }

  // Disabled state
  &.disabled,
  &[disabled] {
    background-color: @lightgray;
    color: fade(@button-text, 75%);
    .box-shadow(none);
    .opacity(70);
  }

  // Button sizes
  // --------------------------------------------------

  // Large
  &.btn-large {
    font-size: @base-font-size * 1.214; /* 17px */
    line-height: 20px;
    padding: 12px 18px 13px;

    > [class^="fui-"] {
      top: 0;

      &.pull-right {
        margin-right: -2px;
      }
    }
  }

  // Set the backgrounds
  // -------------------------
  &.btn-primary {
    .swap-button-color(@firm, @button-primary-hover, @button-primary-active);
  }
  &.btn-info    {
    .swap-button-color(@info, @button-info-hover, @button-info-active);
  }
  &.btn-danger  {
    .swap-button-color(@danger, @button-danger-hover, @button-danger-active);
  }
  &.btn-success {
    .swap-button-color(@success, @button-success-hover, @button-success-active);
  }
  &.btn-warning {
    .swap-button-color(@warning, @button-warning-hover, @button-warning-active);
  }
  &.btn-inverse {
    .swap-button-color(@base, @button-inverse-hover, @button-inverse-active);    
  }

  // Button icon
  // --------------------------------------------------
  > [class^="fui-"] {
    margin: 0 4px;
    position: relative;
    top: 1px;
    vertical-align: top;
    .inline-block();

    &.pull-right {
      margin-right: 0px;
    }
  }
}

// Other button locations
// Button with icon inside
.btn-toolbar .btn {
  &.active {
    color: @button-text;
  }
  &:first-child {
    .border-radius(6px 0 0 6px);
  }
  &:last-child {
    .border-radius(0 6px 6px 0);
  }
  > [class^="fui-"] {
    font-size: @icon-normal;
    top: 0;
  }
}

// Button tip
.btn-tip {
  font-weight: 300;
  padding-left: 10px;
}

// BUTTON GROUP
// ----------------------
.btn-group {
  > .btn {
    border-radius: 0;
    text-align: center;

    &:active,
    &.active {
      & + .btn {
        border-left-color: transparent;
      }
    }
    &:first-of-type {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
    }
    &:last-of-type {
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
    }
    & + .btn {
      margin-left: 0;
    }
    & + .dropdown-toggle {
      border-left: 2px solid fade(@base, 15%);
      padding-left: 13px;
      padding-right: 13px;
      .box-shadow(none);

      .caret {
        margin-left: 3px;
        margin-right: 3px;
      }
    }
    &.btn-huge + .dropdown-toggle {
      .caret {
        margin-left: 7px;
        margin-right: 7px;
      }
    }
    &.btn-small + .dropdown-toggle {
      .caret {
        margin-left: 0;
        margin-right: 0;
      }
    }
  }
}