.social-login-button,
%social-login-button {
  display: inline-block;
  cursor: pointer;
  user-select: none;
  position: relative;

  padding: em($padding-base-vertical) em($padding-base-horizontal);
  padding-left: em($social-login-button-icon-width + $padding-base-horizontal);
  border: 1px solid transparent;
  border-bottom-width: $social-login-button-edge-width;

  vertical-align: middle;

  &,
  &:focus,
  &:hover {
    color: $social-login-button-text-color;
  }

  .icon {
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top:  0;
    left: 0;

    height: 100%;
    width: em($social-login-button-icon-width, $social-login-button-icon-font-size);

    border-right: 1px solid;
    border-right-color: inherit; // inherit must be declared separately

    font-size: em($social-login-button-icon-font-size);
    padding: 0.25em;

    .no-flexbox.no-flexboxlegacy & {
      padding-top: em($padding-base-vertical + .2);
      text-align: center;
    }
  }
}

@each $name, $color in $social-login-button-background-colors {
  .social-login-button-#{$name} {
    @include social-login-button-variant($color);
  }
}