//Button groups

.button-group {
  list-style: none;
  margin: 0; 
  @extend %clearfix;

  li {
    float: left;

    .button,
    button {
      [class*="icon-"] {
        margin-right: 0px;
      }
    }

    &:first-child {
      .button,
      button {
        border-right-width: 0;
      }
    }

    &:last-child {
      .button,
      button {
        border-left-width: 0;
      }
    }

    //Media queries
    @include phone {
      float: none;
      display: block;

      .button,
      button {
        display: block;
      }
    }
  }

  &.pill {
    li:first-child .button {
      @include border-top-left-radius($button-pill-radius);
      @include border-bottom-left-radius($button-pill-radius);
    }

    li:last-child .button {
      @include border-top-right-radius($button-pill-radius);
      @include border-bottom-right-radius($button-pill-radius);
    }
  }

  &.radius {
    li:first-child .button {
      @include border-top-left-radius($button-radius);
      @include border-bottom-left-radius($button-radius);
    }

    li:last-child .button {
      @include border-top-right-radius($button-radius);
      @include border-bottom-right-radius($button-radius);
    }
  }
}