.btn-group
  & > *
    float: left

  .btn
  .btn-icon
    border-radius: 0

    &:first-child
      border-top-left-radius: $radius
      border-bottom-left-radius: $radius

    &:last-child
      border-top-right-radius: $radius
      border-bottom-right-radius: $radius

    &:nth-child(n+2)
      border-left: 0

.btn
  background-color: $btn-default-bg-bottom
  background-image: linear-gradient(top, $btn-default-bg-top 10%, $btn-default-bg-bottom)
  border-radius: $radius
  border: 1px solid $btn-default-border
  color: $link !important
  display: inline-block
  font-weight: normal
  padding: 5px 10px
  text-decoration: none
  text-shadow: 0 1px 0 #FFF
  text-transform: uppercase
  white-space: nowrap

  &:hover
    text-decoration: none
    color: $link-hover !important

  &.flexible
    width: 100%

  &.call-to
    padding: 10px
    font-size: 16px

.btn.sign
  height: 32px

  s
    float: left
    margin: 1px 5px 0 0

.btn-icon
  background-color: $btn-icon-bg-bottom
  background-image: linear-gradient(top, $btn-icon-bg-top, $btn-icon-bg-bottom)
  border-radius: $radius
  border: 1px solid $btn-icon-border
  color: $btn-icon-text !important
  display: inline-block
  font-size: 13px
  font-weight: normal
  padding: 5px 10px
  text-decoration: none
  text-shadow: 0 1px 0 #FFF
  text-transform: uppercase

  &:hover
    text-decoration: none
    color: $base-color !important

.action
  background-color: $btn-action-bg-bottom
  background-image: linear-gradient(top, $btn-action-bg-top 10%, $btn-action-bg-bottom)
  border-radius: $radius
  border: 0
  color: #FFF !important
  display: inline-block
  font-weight: normal
  padding: 5px 10px
  text-decoration: none
  text-shadow: 0 -1px 0 lighten($btn-action-text-shadow, 20%)
  text-transform: uppercase

  &.red
    background-color: $btn-action-red-bg-bottom
    background-image: linear-gradient(top, $btn-action-red-bg-top 10%, $btn-action-red-bg-bottom)
    text-shadow: 0 -1px 0 $btn-action-red-bg-top

    &:hover
      background-image: linear-gradient(top, $btn-action-red-bg-top 10%, $btn-action-red-bg-bottom-hover)

  &.blue
    background-color: $btn-action-blue-bg-bottom
    background-image: linear-gradient(top, $btn-action-blue-bg-top 10%, $btn-action-blue-bg-bottom)
    text-shadow: 0 -1px 0 $btn-action-blue-bg-top

    &:hover
      background-image: linear-gradient(top, $btn-action-blue-bg-top 10%, $btn-action-blue-bg-bottom-hover)

  &:hover
    background-image: linear-gradient(top, $btn-action-bg-top 10%, lighten($btn-action-bg-top, 2%))
    color: #FFF !important
    text-decoration: none

  &.call-to
    padding: 10px
    font-size: 16px

  &.standalone
    margin: 30px 0 20px