@mixin button($color: $blue, $clear: false, $border: true) {
  background: $color;
  border-radius: $radius;
  @if $clear == true {
    color: inherit;
  }
  @else {
    color: #FFF;
  }
  display: inline-block;
  outline: none;
  padding: $gutter/5 $gutter;
  @include transition-property(background, border, color);
  @include transition-duration(0.1s);
  &:hover,
  &:focus {
    @if $clear == true {
      background: shade($color, 5%);
      color: inherit;
    }
    @else {
      background: tint($color, 10%);
      color: #FFF;
    }
    text-decoration: none;
  }
  &:active,
  &.active {
    @if $clear == true {
      background: tint($color, 80%);
      color: inherit;
    }
    @else {
      background: shade($color, 10%);
      color: #FFF;
    }
    text-decoration: none;
  }
  &[disabled=disabled],
  &[disabled=true],
  &[disabled] {
    background: tint($black, 98%);
    border-color: shade(tint($black, 98%), 10%);
    color: tint($black, 40%);
  }
  @if $border == true {
    border: 1px solid shade($color, 10%);
  }
}

@mixin bundle($border: true) {
  border-radius: 0;
  &:first-child {
    border-radius: $radius 0 0 $radius;
  }
  &:last-child {
    border-radius: 0 $radius $radius 0;
  } 
  @if $border == true {
    border-right-width: 0;
    &:first-child {
      &:hover,
      &:active,
      &.active {
        border-right-width: 1px;
        &+ a {
          border-left-width: 0;
        }
      }
    }
    &:last-child {
      border-right-width: 1px;
    }
  }
}