@use 'sass:color';
@use '../../stylesheets/colors' as *;

.OAuthLoginButton {
/*  display: block;
  width: 100%;
  padding: 10px 15px;
  border: none; */
  background: $gray-lighter;
  /* border-radius: 3px; */

  i {
    margin-right: 3px;
    font-size: 18px;
    position: relative;
    top: 1px;
  }

  &.OAuthLoginButton-facebook {
    background: $facebook;
    color: #fff;

    &:hover { background: color.adjust($facebook, $lightness: -5%); }
  }

  &.OAuthLoginButton-google {
    background: $google;
    color: #fff;

    &:hover { background: color.adjust($google, $lightness: -5%); }
  }

  &.OAuthLoginButton-github {
    background: $github;
    color: #fff;

    &:hover { background: color.adjust($github, $lightness: -5%); }
  }

  &:active {
    position: relative;
    top: 1px;
  }

  &:active,
  &:focus {
    outline: 0;
  }
}

.OAuthLoginButton + .OAuthLoginButton {
  margin-top: 10px;
}