@define-mixin btn-base $name, $color, $text-color: #ffffff {
  $hover-color: color($color saturation(- 2%) shade(10%));
  $disabled-color: color($color saturation(- 20%) shade(5%) alpha(- 30%));
  $disabled-hover-color: color($disabled-color shade(5%));

  box-sizing:       border-box;
  display:          inline-block;
  padding:          .8em 3.5em;

  background-color: $color;

  border:           none;
  border-radius:    .5em;
  outline:          none;

  font-family:      'Source Sans Pro', source-sans-pro, pt sans, calibri, sans-serif;
  font-weight:      normal;
  color:            $text-color;
  text-transform:   uppercase;
  letter-spacing:   .1em;
  text-align:       center;

  transition:
    background-color .1s ease,
    border-color .1s ease;

  &:hover,
  &:focus {
    text-decoration: none;
    @if $color != transparent {
      background: $hover-color;
      border-color: $hover-color;
    }
  }

  @if $name == pampas {
    border: 1px solid $pampas-border;
  }
  @if $name == ruby {
    border: 1px solid $hover-color;
  }

  &.disabled,
  &[disabled] {
    background-color: $disabled-color;
    border-color: $disabled-color;
    color: color($text-color saturation(- 20%) alpha(- 40%));
    cursor: not-allowed;

    &:hover,
    &:focus {
      background-color: $disabled-hover-color;
      border-color: $disabled-hover-color;
    }
  }


  [class^="icon-"]:before,
  [class*=" icon-"]:before {
    font-size: 2rem;
    vertical-align: middle;
  }
}