%btn--base {
  @extend .brdr--rounded;
  padding: $padding/2 $padding;
  border: 2px solid #ccc;
  color: $font-color;
  text-decoration: none;
  text-align: center;
  background: transparent;
}

.btn {
  @extend %btn--base;

  &:hover,
  &:focus,
  &:active {
    background-color: rgba(0,0,0,0.05);
    color: darken($font-color, 20%);
  }
}

.btn--link {
  @extend %btn--base;

  border-color: transparent;
  color: $link-color;

  &:hover {
    background-color: transparent;
    color: darken($link-color, 15%);
  }
}

.btn--blue {
  @extend %btn--base;

  border-color: darken($blue, 3%);
  background-color: $blue;
  color: $white;

  &:hover,
  &:focus,
  &:active {
    color: $white;
    background-color: darken($blue, 10%);
  }
}

.btn--green {
  @extend %btn--base;

  border-color: darken($green, 4%);
  background-color: $green;
  color: $white;

  &:hover,
  &:focus,
  &:active {
    color: $white;
    background-color: darken($green, 10%);
  }
}

.btn--gray {
  @extend %btn--base;

  border-color: darken($dark-gray, 5%);
  background-color: $dark-gray;
  color: $white;

  &:hover,
  &:focus,
  &:active {
    color: $white;
    background-color: darken($dark-gray, 10%);
  }
}

.btn--red {
  @extend %btn--base;

  border-color: darken($red, 5%);
  background-color: $red;
  color: $white;

  &:hover,
  &:focus,
  &:active {
    color: $white;
    background-color: darken($red, 10%);
  }
}

.btn--s {
  @extend .small;
  padding: $padding/2;
}