// Low-level function for a Google Plus-style button.
@mixin pwnplus-button(
    $color,
    $border-color,
    $text-color,
    $font-weight: inherit,
    $hover-text-color: $text-color,
    $hover-border-color: $border-color,
    $active-text-color: $text-color,
    $active-border-color: $hover-border-color,
    $subdued: true
) {
  display: inline-block;

  margin: 0;
  padding: 0.2em 1ex 0 1ex;
  border: 1px solid $border-color;
  border-radius: 2px;

  color: $text-color;
  @if not $subdued {
    text-shadow: 0 1px rgba(0, 0, 0, 0.1);
  }
  font-family: inherit;
  font-size: 1.25em;
  line-height: 1.375em;
  font-weight: $font-weight;
  text-decoration: none;
  text-overflow: ellipsis;

  background-color: $color;
  background: linear-gradient(top, lighten($color, 2%), darken($color, 2%));

  transition: all .218s;

  @if $subdued {
    img {
      -webkit-filter: grayscale(0.4);
      filter: grayscale(0.4);
    }
  }
  @if not $subdued {
    img {
      -webkit-filter: brightness(0.95);
      filter: brightness(0.95);
    }
  }

  &:visited {
    color: $text-color;
  }

  &:hover {
    color: $hover-text-color;
    border-color: $hover-border-color;
    @if not $subdued {
      text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  }

    @if $subdued {
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
      img {
        filter: grayscale(0);
      }
    }
    @if not $subdued {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      img {
        -webkit-filter: brightness(1.05);
        filter: brightness(1.05);
      }
    }
  }
  &:active {
    color: $active-text-color;
    border-color: $active-border-color;

    background: linear-gradient(top, darken($color, 2%), lighten($color, 2%));

    @if $subdued {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      img {
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
      }
    }
    @if not $subdued {
      text-shadow: 0 1px rgba(0, 0, 0, 0.3);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      img {
        -webkit-filter: brightness(1.05);
        filter: brightness(1.05);
      }
    }
  }
}

// Handy mixin for a gray-ish Google Plus-like button.
@mixin pwnplus-subdued-button($main-color) {
  @include pwnplus-button(
    $color: change-color($main-color, $saturation: 5%, $lightness: 95%),
    $text-color: change-color($main-color, $saturation: 5%, $lightness: 43%),
    $border-color: change-color($main-color, $saturation: 5%, $lightness: 86%),
    $hover-border-color: change-color($main-color, $saturation: 5%,
                                                   $lightness: 78%),
    $font-weight: 400,
    $subdued: true
  );
}

// Handy mixin for a colored Google Plus-like button.
@mixin pwnplus-emphasized-button($main-color) {
  @include pwnplus-button(
    $color: change-color($main-color, $saturation: 100%, $lightness: 40%),
    $text-color: change-color($main-color, $saturation: 0%, $lightness: 100%),
    $font-weight: 600,
    $border-color: change-color($main-color, $saturation: 57%,
                                             $lightness: 32%),
    $hover-border-color: change-color($main-color, $saturation: 100%,
                                                   $lightness: 22%),
    $subdued: false
  );
}