$icon-button-default-base-color: #6aacf7 !default;

@mixin icon-button($base-color: $icon-button-default-base-color) {
  @include simple-button($base-color);

  color: #fff;
  padding-top: 5px;
  padding-bottom: 4px;
  padding-left: 12px;

  &:before {
    font-size: 16px;
    margin-right: 6px;
    vertical-align: middle;
  }
}

@mixin icon-only-button($base-color: $icon-button-default-base-color) {
  @include simple-button($base-color);

  padding-top: 5px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;

  &:before {
    font-size: 16px;
    vertical-align: middle;
  }
}

@mixin simple-button($base-color) {
  $grayscale: $base-color == grayscale($base-color);
  $color: hsl(0, 0, 100%);
  $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
  $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
  $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
  $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);

  @if lightness($base-color) > 70% {
    $color: hsl(0, 0, 20%);
    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
  }

  @if $grayscale == true {
    $border: grayscale($border);
    $inset-shadow: grayscale($inset-shadow);
    $stop-gradient: grayscale($stop-gradient);
    $text-shadow: grayscale($text-shadow);
  }

  border: 1px solid $border;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 0 $inset-shadow;
  color: $color;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  @include linear-gradient ($base-color, $stop-gradient);
  padding: 7px 18px;
  text-decoration: none;
  text-shadow: 0 1px 0 $text-shadow;
  background-clip: padding-box;

  &:hover:not(:disabled):not(.disabled) {
    $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
    $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
    $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);

    @if $grayscale == true {
      $base-color-hover: grayscale($base-color-hover);
      $inset-shadow-hover: grayscale($inset-shadow-hover);
      $stop-gradient-hover: grayscale($stop-gradient-hover);
    }

    box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
    cursor: pointer;
    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
  }

  &:active:not(:disabled):not(.disabled) {
    $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
    $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
    $inset-shadow: #eee;

    @if $grayscale == true {
      $border-active: grayscale($border-active);
      $inset-shadow-active: grayscale($inset-shadow-active);
    }

    border: 1px solid $border-active;
    box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 $inset-shadow;
  }

  &:disabled,
  &.disabled {
    opacity: 0.5;
    cursor: default;
  }
}