.g-oauth-container
  margin-top 20px

  .g-oauth-section-header
    height 2px
    background-color #dcd6d6
    margin-bottom 16px
    font-size 12px
    text-align center

  .g-oauth-section-header-text
    display inline
    background-color #fff
    position relative
    top -7px
    padding 0 7px
    color #878080

.g-oauth-button
  width 160px
  border-radius 3px
  padding 7px 11px
  display inline-block
  cursor pointer
  margin-right 15px
  margin-bottom 10px

  .g-oauth-button-icon
    display inline-block
    padding-right 6px
    border-right 1px solid white
  .g-oauth-button-text
    display inline-block
    text-align center
    width 109px

.g-oauth-button-google
  // https://developers.google.com/+/branding-guidelines
  $brandColor = #dc4e41

  background-color $brandColor
  border 1px solid darken($brandColor, 30%)
  color white

  &:hover
    background-color darken($brandColor, 15%)

  .g-oauth-button-icon
    border-right-color darken($brandColor, 30%)

.g-oauth-button-globus
  $brandColor = #2b5693

  background-color $brandColor
  border 1px solid darken($brandColor, 30%)
  color white

  &:hover
    background-color darken($brandColor, 15%)

  .g-oauth-button-icon
    border-right-color darken($brandColor, 30%)

.g-oauth-button-github
  // http://brandcolors.net?brands=76
  $brandColor = #333333

  background-color $brandColor
  border 1px solid darken($brandColor, 30%)
  color white

  &:hover
    background-color darken($brandColor, 15%)

  .g-oauth-button-icon
    border-right-color darken($brandColor, 30%)

.g-oauth-button-linkedin
  // http://brandcolors.net?brands=99
  $brandColor = #0077b5

  background-color $brandColor
  border 1px solid darken($brandColor, 30%)
  color white

  &:hover
    background-color darken($brandColor, 15%)

  .g-oauth-button-icon
    border-right-color darken($brandColor, 30%)

.g-oauth-button-bitbucket
  $brandColor = #205081

  background-color $brandColor
  border 1px solid darken($brandColor, 30%)
  color white

  &:hover
    background-color darken($brandColor, 15%)

  .g-oauth-button-icon
    border-right-color darken($brandColor, 30%)

.g-oauth-button-microsoft
  $brandColor = #00a1f1

  background-color $brandColor
  border 1px solid darken($brandColor, 30%)
  color white

  &:hover
    background-color darken($brandColor, 15%)

  .g-oauth-button-icon
    border-right-color darken($brandColor, 30%)

.g-oauth-button-box
  $brandColor = #0081c6

  background-color $brandColor
  border 1px solid darken($brandColor, 30%)
  color white

  &:hover
    background-color darken($brandColor, 15%)

  .g-oauth-button-icon
    border-right-color darken($brandColor, 30%)
