@mixin social-login-button-variant($color) {
  $background: mix(white, $color, $social-login-button-background-lighten);
  background-color: $background;
  border-color: darken($background, $social-login-button-border-darken);

  &:hover {
    background-color: $color;
    border-color: darken($color, $social-login-button-border-darken);
  }

  &:active {
    background-color: darken($color, $social-login-button-active-darken);
    border-color: darken($color, $social-login-button-border-darken + $social-login-button-active-darken);
  }
}