// Name:            Button groups
//
// Component:       `btn-group`
//
// ========================================================================
// Variables
// ========================================================================

$btn-group-shadow:            $btn-shadow;

// Component: Button groups
// ========================================================================

.btn-group {
  .dropdown-menu {
    > li {
      > a {
        padding: 6px 40px 6px 15px;
        
        .badge {
          position: absolute;
          right: 15px;
          margin-top: 2px;
        }
      }
    }
  }

  &,
  &-vertical {
    box-shadow: $btn-group-shadow;

    > .btn,
    .btn-group,
    .btn-group-vertical {
      box-shadow: none;
    }
  }

  &-flat {
    box-shadow: none;
  }

  .btn ~ .dropdown-toggle {
    margin-left: -1px;
    padding-right: .8em;
    padding-left: .8em;

    &:after {
      margin-left: 0;
    }
  }
}

.btn-group.open .dropdown-toggle {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05);
}

.btn-group:focus .dropdown-toggle {
  transition: .25s;
}

// add from---v3

// 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;
  }
}

.btn-group-xs > .btn { @extend .btn-xs; }
// add end