// BUTTON GROUPS
 // -------------
 
 
 // Make the div behave like a button
 .btn-group {
   position: relative;
   .clearfix(); // clears the floated buttons
   .ie7-restore-left-whitespace();
 }
 
 // Space out series of button groups
 .btn-group + .btn-group {
   margin-left: 5pt;
 }
 
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
   margin-top: @baseLineHeight / 2;
   margin-bottom: @baseLineHeight / 2;
   .btn-group {
     display: inline-block;
     .ie7-inline-block();
   }
 }
 
 // Float them, remove border radius, then re-add to first and last elements
 .btn-group > .btn {
   position: relative;
   float: left;
   margin-left: -1pt;
   .border-radius(0);
 }
 // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
 .btn-group > .btn:first-child {
   margin-left: 0;
      -webkit-border-top-left-radius: 4pt;
          -moz-border-radius-topleft: 4pt;
              border-top-left-radius: 4pt;
   -webkit-border-bottom-left-radius: 4pt;
       -moz-border-radius-bottomleft: 4pt;
           border-bottom-left-radius: 4pt;
 }
 // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
 .btn-group > .btn:last-child,
 .btn-group > .dropdown-toggle {
      -webkit-border-top-right-radius: 4pt;
          -moz-border-radius-topright: 4pt;
              border-top-right-radius: 4pt;
   -webkit-border-bottom-right-radius: 4pt;
       -moz-border-radius-bottomright: 4pt;
           border-bottom-right-radius: 4pt;
 }
 // Reset corners for large buttons
 .btn-group > .btn.large:first-child {
   margin-left: 0;
      -webkit-border-top-left-radius: 6pt;
          -moz-border-radius-topleft: 6pt;
              border-top-left-radius: 6pt;
   -webkit-border-bottom-left-radius: 6pt;
       -moz-border-radius-bottomleft: 6pt;
           border-bottom-left-radius: 6pt;
 }
 .btn-group > .btn.large:last-child,
 .btn-group > .large.dropdown-toggle {
      -webkit-border-top-right-radius: 6pt;
          -moz-border-radius-topright: 6pt;
              border-top-right-radius: 6pt;
   -webkit-border-bottom-right-radius: 6pt;
       -moz-border-radius-bottomright: 6pt;
           border-bottom-right-radius: 6pt;
 }
 
 // On hover/focus/active, bring the proper btn to front
 .btn-group > .btn:hover,
 .btn-group > .btn:focus,
 .btn-group > .btn:active,
 .btn-group > .btn.active {
   z-index: 2;
 }
 
 // On active and open, don't show outline
 .btn-group .dropdown-toggle:active,
 .btn-group.open .dropdown-toggle {
   outline: 0;
 }
 
 
 
 // Split button dropdowns
 // ----------------------
 
 // Give the line between buttons some depth
 .btn-group > .dropdown-toggle {
   padding-left: 8pt;
   padding-right: 8pt;
   .box-shadow(~"inset 1pt 0 0 rgba(255,255,255,.125), inset 0 1pt 0 rgba(255,255,255,.2), 0 1pt 2pt rgba(0,0,0,.05)");
   *padding-top: 4pt;
   *padding-bottom: 4pt;
 }
 .btn-group > .btn-mini.dropdown-toggle {
   padding-left: 5pt;
   padding-right: 5pt;
 }
 .btn-group > .btn-small.dropdown-toggle {
   *padding-top: 4pt;
   *padding-bottom: 4pt;
 }
 .btn-group > .btn-large.dropdown-toggle {
   padding-left: 12pt;
   padding-right: 12pt;
 }
 
 .btn-group.open {
 
   // The clickable button for toggling the menu
   // Remove the gradient and set the same inset shadow as the :active state
   .dropdown-toggle {
     background-image: none;
     .box-shadow(~"inset 0 2pt 4pt rgba(0,0,0,.15), 0 1pt 2pt rgba(0,0,0,.05)");
   }
 
   // Keep the hover's background when dropdown is open
   .btn.dropdown-toggle {
     background-color: @btnBackgroundHighlight;
   }
   .btn-primary.dropdown-toggle {
     background-color: @btnPrimaryBackgroundHighlight;
   }
   .btn-warning.dropdown-toggle {
     background-color: @btnWarningBackgroundHighlight;
   }
   .btn-danger.dropdown-toggle {
     background-color: @btnDangerBackgroundHighlight;
   }
   .btn-success.dropdown-toggle {
     background-color: @btnSuccessBackgroundHighlight;
   }
   .btn-info.dropdown-toggle {
     background-color: @btnInfoBackgroundHighlight;
   }
   .btn-inverse.dropdown-toggle {
     background-color: @btnInverseBackgroundHighlight;
   }
 }
 
 
 // Reposition the caret
 .btn .caret {
   margin-top: 7pt;
   margin-left: 0;
 }
 .btn:hover .caret,
 .open.btn-group .caret {
   .opacity(100);
 }
 // Carets in other button sizes
 .btn-mini .caret {
   margin-top: 5pt;
 }
 .btn-small .caret {
   margin-top: 6pt;
 }
 .btn-large .caret {
   margin-top: 6pt;
   border-left-width:  5pt;
   border-right-width: 5pt;
   border-top-width:   5pt;
 }
 // Upside down carets for .dropup
 .dropup .btn-large .caret {
   border-bottom: 5pt solid @black;
   border-top: 0;
 }
 
 
 
 // Account for other colors
 .btn-primary,
 .btn-warning,
 .btn-danger,
 .btn-info,
 .btn-success,
 .btn-inverse {
   .caret {
     border-top-color: @white;
     border-bottom-color: @white;
     .opacity(75);
   }
 }