.login-page
  padding: 30px 8px 30px 8px
  background-color: $mobileGray
  header
    border-bottom: 2px solid $productOverviewBorder
    .header-placeholder
      +flex(space-between, center)
      padding: 0 16px
      height: 40px
      h1
        +bold
        color: $blue
        font-size: 16px
        line-height: 19px

  .gray-divider
    background-color: $mobileGray
    height: 40px
  .login-panel
    padding: 20px 16px
    background-color: white
    border: 2px solid $mobileBorderColor
    margin-bottom: 30px
    &:last-of-type
      margin-bottom: 0
    h2
      +bold
      font-size: 18px
      line-height: 22px
      color: $blue
      margin: 0

    p
      +regular
      color: $mobileBlack
      font-size: 14px
      line-height: 17px
      margin: 3px 0
    .btn-holder
      height: 50px
      width: 100%
      background-color: $blue
      border-radius: 10px
      margin-top: 15px
      +flex(center, center)
      position: relative

      &:after
        content: '›'
        +semibold
        color: white
        font-size: 35px
        line-height: 28px
        position: absolute
        right: 15px
        top: -3px
        height: 100%
        +flex(center,center)

      input, a
        text-decoration: none
        position: absolute
        left: 0
        top: 0
        width: 100%
        height: 100%
        +flex(center, center)
      input
        opacity: 0

      span
        color: white
        +regular
        font-size: 17px
        line-height: 19px

    &.continue-login
      //border-top: 2px solid $productOverviewBorder

      .btn-holder
        background-color: $light-grey

      form
        margin-top: 15px
        .input-holder
          margin-bottom: 5px

      .forgot-password
        text-decoration: none
        +semibold
        color: $blue
        font-size: 14px
        line-height: 17px
        a
          text-decoration: none
          +semibold
          color: $blue
          font-size: 14px
          line-height: 17px

  .text-block
    .btn-holder
      margin: 20px 0
      a:before
        display: none

      .btn
        position: relative
        height: 100%
        +flex(center, center)
        input
          position: absolute
          left: 0
          top: 0
          width: 100%
          height: 100%
          opacity: 0
        span
          color: white
          +regular
          font-size: 17px
          line-height: 19px
        &:after
          content: '›'
          +semibold
          color: white
          font-size: 35px
          line-height: 28px
          position: absolute
          right: 15px
          top: -3px
          height: 100%
          +flex(center,center)
    &.login-block
      border: 2px solid $mobileBorderColor
      margin-bottom: 30px
      .input-holder
        margin-bottom: 5px

  &.customer-login
    background-color: $mobileGray
    padding-top: 0

    .text-block
      border: 2px solid $mobileBorderColor

    .forgot-password
      text-decoration: none
      +semibold
      //background-color: $mobileGray
      border: 2px solid $mobileBorderColor
      border-radius: 8px
      color: $blue
      font-size: 14px
      line-height: 17px
      height: 40px
      width: 90%
      max-width: 250px
      +flex(center, center)
      a
        text-decoration: none
        +semibold
        color: $blue
        font-size: 14px
        line-height: 17px
        +flex(center, center)
        width: 100%
        height: 100%

+media-query(380px)
  .login-page
    header
      .header-placeholder
        display: block
        height: auto
        padding-left: 0
        h1
          padding-left: 22px