// Base
// -------------------------
.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle; // match .btn alignment given font-size hack above
  > .btn {
    position: relative;
    float: left;
    // Bring the "active" button to the front
    &:hover,
    &:focus,
    &:active,
    &.active {
      z-index: 2;
    }
  }
}

// Prevent double borders when buttons are next to each other
.btn-group {
  .btn + .btn,
  .btn + .btn-group,
  .btn-group + .btn,
  .btn-group + .btn-group {
    margin-left: -1px; /*no*/
  }
}

// Prevent double borders when buttons are next to each other
.btn-group {
    .btn + .btn,
    .btn + .btn-group,
    .btn-group + .btn,
    .btn-group + .btn-group {
        margin-left: 1px; /*no*/
    }

    // In default button border is darker than bg
    .btn + .btn-default,
    .btn-default + .btn-group,
    .btn-group + .btn-default {
        margin-left: -1px; /*no*/
    }
}


// Sizing
// -------------------------

// Since we use overrides in buttons.less, sizing needs to be
// dublicated here
.btn-group-xlg > .btn {
    &:extend(.btn-xlg);
}
.btn-group-lg > .btn {
    &:extend(.btn-lg);
}
.btn-group-sm > .btn {
    &:extend(.btn-sm);
}
.btn-group-xs > .btn {
    &:extend(.btn-xs);
}

// Justified button groups
// ----------------------

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  > .btn,
  > .btn-group {
    float: none;
    display: table-cell;
    width: 1%;
  }
  > .btn-group .btn {
    width: 100%;
  }

  > .btn-group .dropdown-menu {
    left: auto;
  }
}


// Justified button groups
// ----------------------

.btn-group-justified {
    > .btn + .btn,
    > .btn-group + .btn-group > .btn {
        border-left-color: fade(#fff, 20%);
    }

    > .btn + .btn-default,
    > .btn-group + .btn-group > .btn-default {
        border-left-width: 0;
    }
}