@mixin social-button($color) {
  background: $color;
  color: color(white);
  &:hover {
    background: darken($color, 10%);
  }
  &.btn-link {
    background: none;
    color: $color;
    &:hover {
      color: darken($color, 10%);
    }
  }
}

@mixin btn-social-outline-variant($color) {
  background: transparent;
  border-color: $color;
  color: $color;
  &:hover {
    background: rgba($color, 0.2);
  }
}

@mixin button-inverse-variant($color, $color-hover: $white) {
  color: $color;
  background-color: rgba($color, 0.2);
  background-image: none;
  border-color: rgba($color, 0);
  @include hover {
    color: $color-hover;
    background-color: $color;
    border-color: $color;
  }
  &.focus,
  &:focus {
    box-shadow: 0 0 0 3px rgba($color, .5);
  }
  &.disabled,
  &:disabled {
    color: $color;
    background-color: transparent;
  }
  &.active,
  &:active,
  .show>&.dropdown-toggle {
    color: $color-hover;
    background-color: $color;
    border-color: $color;
  }
}

@mixin button-inverse-outline-variant($color, $color-hover: $white) {
  color: $color;
  background-image: none;
  background: transparent;
  border-color: rgba($color, 0.2);
  @include hover {
    color: $color;
    background-color: rgba($color, 0.2);
    border-color: rgba($color, 0.2);
  }
  &.focus,
  &:focus {
    box-shadow: 0 0 0 3px rgba($color, .5);
  }
  &.disabled,
  &:disabled {
    color: $color;
    background-color: transparent;
  }
  &.active,
  &:active,
  .show>&.dropdown-toggle {
    color: $color-hover;
    border-color: $color;
  }
}