.xsd-preauth
  // 100% Height causing scrolling for some reason, no idea why
  height: auto

  // Pages excluded from padding-top
  padding-top: 0

  // Don't need persistent scroll bar on preauth
  overflow-y: auto

  .xsd-application-container
    padding: 0
    color: white

// GENERICS

.xsd-preauth-bg
  position: fixed
  top: -2%
  left: -2%
  height: 104%
  width: 104%
  z-index: -100

  background-color: mix($brand-primary, black)
  background-image: url('~assets/images/login_backgrounds/5.jpg')
  background-blend-mode: color-dodge
  background-repeat: no-repeat
  background-size: cover
  background-position: 25%

.xsd-preauth-big-icon
  display: block
  font-size: 50vw
  text-align: center
  opacity: 0.4

.xsd-preauth-content
  width: 100%
  margin: 0 auto

  max-width: 800px

  padding: 5vw
  background: rgba(255,255,255,0.7)
  color: #333

.xsd-preauth-logo
  margin: 0 auto
  margin-top: 6vh
  margin-bottom: 6rem // Used for static
  height: 40vh

  text-align: center
  img
    height: 100%
    max-height: 300px

@include media-breakpoint-down(sm)
  // Hide logo and login elements on register / password reset etc
  .xsd-preauth-logo
    height: 10vh
    margin-top: 3vh
    margin-bottom: 1rem
  .xsd-preauth-login
    display: none
  .xsd-preauth--login
    .xsd-preauth-logo
      height: 40vh
      margin-top: 6vh
    .xsd-preauth-login
      display: block

@include media-breakpoint-up(md)
  // Side-by-side for medium and up
  .xsd-preauth .xsd-application-container
    margin: 0
    width: 50%

  //.xsd-preauth-logo
  //  padding-right: 50%

  .xsd-preauth-login
    position: static

  .xsd-preauth-content
    position: fixed
    height: 100%
    width: 50%
    top: 0
    right: 0
    left: inherit

    padding: 2rem
    background: rgba(255, 255, 255, 0.9)
    border-top: 6px solid $brand-primary

.xsd-preauth-message
  text-align: center

.xsd-preauth-form
  label
    display: block

  label
    display: block
    margin-bottom: 1rem

  button
    display: block
    width: 100%

  .errorlist
    list-style: none
    padding: 0.5em
    background: $brand-danger
    font-weight: bold
    color: white


.xsd-preauth-form__controls
  .btn
    width: 100%

// SPECIFICS

.xsd-preauth-facebook
  display: block
  width: 100%

  @include media-breakpoint-up(md)
    // md side-by-side
    width: 70%
    min-width: 400px
    margin: 0 auto

  .btn
    box-shadow: 0px 2px 1px rgba(0,0,0,0.05)

  img
    // Facebook logo
    height: 1.5em
    margin-right: 0.2em
    margin-top: -4px // Baseline adjustment

.xsd-preauth-form--login
  label
    display: block
    margin-bottom: 1rem

  button
    display: block
    width: 100%

  .xsd-preauth-form__controls
    @include make-row
    // Has -15px margin either side from BS4, not really sure why. Removing here -- wjdp
    margin-left: 0 !important
    margin-right: 0 !important

    & > *
      @include make-col(6)


.xsd-preauth-login__alternate
  // Login with email / New member? links
  @include make-row
  margin-left: 2vw
  margin-right: 2vw
  a
    padding: 1em 0 // Increase tap area

  @include media-breakpoint-up(md)
    // Hide on medium and up
    display: none

  a
    color: white
    opacity: 0.7

  .xsd-preauth-login__alternate__email, .xsd-preauth-login__alternate__register
    @include make-col(6)
    text-align: center


$email-entry-time: 0.33s
$email-exit-time: 0.22s

@include media-breakpoint-down(sm)
  .xsd-preauth-content--login
    display: none

  .xsd-preauth-login, .xsd-preauth-email-login
    position: fixed
    left: 0
    bottom: 0
    width: 100%
    padding: 0 5vw

  .xsd-preauth-login
    margin-bottom: 4vh

  .xsd-preauth-login__social
    margin-bottom: 6vh

  .xsd-preauth-email-login
    padding: 7vw 5vw
    z-index: 110
    background: mix($brand-primary, black)

    will-change: transform
    transform: translateY(102%)
    transition: transform $email-exit-time cubic-bezier(0,0,0.3,1) // Fast exit

    &.xsd-preauth-email-login--visible
      transform: translateY(0)
      transition: transform $email-entry-time cubic-bezier(0,0,0.3,1) // Slow entry

  .xsd-preauth-form__controls
    a
      color: $color-text-white
    .btn-secondary-outline
      opacity: 0.5

  // Makes the page black
  .xsd-preauth-blur
    position: fixed
    left: 0
    top: 0
    width: 100%
    height: 100%

    z-index: 100

    background: #000
    opacity: 0

    pointer-events: none

    transition: opacity $email-exit-time cubic-bezier(0,0,0.3,1) // Fast exit

    &.xsd-preauth-blur--visible
      pointer-events: auto
      opacity: 0.6
      transition: opacity $email-entry-time cubic-bezier(0,0,0.3,1) // Slow entry


@include media-breakpoint-up(md)
  .xsd-preauth-email-login
    display: none

  .xsd-preauth-content__sign-in
    min-height: 50vh

  .xsd-preauth-content__onboard


.xsd-preauth-email-login__errors
  padding: 0.5em
  background: $brand-danger
  font-weight: bold

.xsd-preauth-register-facebook
  @include media-breakpoint-up(md)
    display: none
  hr
    border-color: rgba(255, 255, 255, 0.2)
    margin-top: 1.5rem
    margin-bottom: 1.5rem
