#signin
  align-items center
  background-position center
  background-size cover
  display flex
  height 100vh
  justify-content center
  position relative
  text-align center

#signin .texture
  background-image url("https://www.toptal.com/designers/subtlepatterns/patterns/textured_paper.png")
  background-position center center
  bottom 0
  left 0
  opacity .25
  position absolute
  right 0
  top 0
  z-index 20

#signin .content > div
  background rgba(255, 255, 255, .95)
  border-radius 10px
  box-shadow 0 0 100px 0 rgba(black, .5)
  color #333
  display block
  margin 0 auto
  max-width 90%
  padding 50px 40px
  text-align left
  width 400px
  opacity 0
  transition opacity 0.5s ease 0s, transform 1s ease 0s
  z-index 30
  &.active
    opacity 1
  &.hidden
    display none

#signin #logged-out

  label
    display block
    font-size 18px
    font-weight 600
    letter-spacing 5px
    line-height 30px
    margin-bottom 5px
    text-transform uppercase
    word-wrap break-word

  input
    border 1px solid #999
    display block
    font-size 20px
    font-weight 300
    letter-spacing 1px
    line-height 30px
    padding 4px 8px
    margin-bottom 20px
    width 100%

  #login-button
    background $blue
    color white
    cursor pointer
    font-size 20px
    margin 30px auto 20px
    padding 12px 8px
    text-align center
    @media (hover)
      &:hover
        background darken($blue, 5)

  #status-message
    text-align center

  #error-message
    color $red
    font-size 18px
    line-height 20px
    margin-bottom 20px
    text-align center

  .divider
    background-color #C8CCCF
    height 1px
    margin 0 auto 25px
    width 20%

  .social
    text-align center
    .icon
      display inline-block
      &.google a
        background $google
      &.facebook a
        background $facebook
      &.twitter a
        background $twitter

    .icon a
      align-items center
      border-radius 4px
      display inline-block
      height 50px
      justify-content center
      margin 4px 8px
      width 50px
    .icon svg
      color white
      height 50px
      padding 10px
      width 50px
    @media (hover)
      .icon:hover a
        opacity .8

#signin #logged-in
  text-align center

  h3
    font-size 20px

  span#user-email
    font-weight bold
    line-height 30px

  #continue-button
    background $blue
    color white
    cursor pointer
    display block
    font-size 20px
    margin 30px auto 20px
    padding 12px 8px
    text-align center
    @media (hover)
      &:hover
        background darken($blue, 5)

  #change-account
    cursor pointer