.login-container
  align-items: center
  bottom: 0
  display: flex
  justify-content: center
  left: 0
  position: fixed
  right: 0
  top: 0

.login-box
  +container-box
  margin: 15px
  max-width: 600px
  min-width: 300px
  padding: 15px 35px

  .login-title,
  .settings-title
    font:
      size: 2.2em
      weight: 300
    padding: 15px
    text-align: center

  .login-info
    color: $color-text-dark-primary
    font-weight: 300
    text-align: center

  $provider-color-facebook: #3b5998
  $provider-color-google: #dd4b39
  $provider-color-blender_id: #00bcef
  .login-providers
    align-items: center
    display: flex
    flex-direction: column
    justify-content: center
    margin: 15px

    .login-provider-button
      background-color: $provider-color-blender_id
      border-radius: 3px
      color: white
      display: block
      font-weight: bold
      margin-bottom: 10px
      min-width: 200px
      padding: 8px 10px
      text-align: center
      text-decoration: none
      text-shadow: 1px 1px rgba(black, .2)
      transition: background-color 150ms ease-in-out

      &:hover
        background-color: lighten($provider-color-blender_id, 7%)

      &.facebook
        background-color: $provider-color-facebook

        &:hover
          background-color: lighten($provider-color-facebook, 7%)

      &.google
        background-color: $provider-color-google

        &:hover
          background-color: lighten($provider-color-google, 7%)


#user-edit-container
  padding: 15px

  #user-edit-header
    .user-edit-name
      font-size: 1.5em
    .user-edit-username,
    .user-edit-email,
    .user-edit-id
      color: $color-text-dark-secondary
      padding: 3px 0

      i
        margin-right: 5px

  #user-edit-form
    padding: 10px 0

    #submit_edit_user
      +button($color-success, 3px, true)

    #button-cancel
      +button(#aaa, 3px)
      margin: 0 10px

    #user-edit-notification
      float: right
      color: $color-text-dark-secondary
      padding: 10px 0

      &.success
        color: $color-success
      &.fail
        color: $color-danger