$facebook-login-color: #3c5a99;
$strava-login-color: #fc4c02;
$sign-in-up-form-bg: $gray-lighter;

// Used by everywhere that does password reset
.password-help-text {
  @extend .below-input-help;
  a {
    text-decoration: underline;
    // Necessary to override the styles from the sign up form
    font-weight: normal !important;
    color: $gray-light !important;
  }
}

@mixin oauth-login-bar(
  $oauth-login-bg,
  $oauth-login-bg-hover: darken($oauth-login-bg, 7%)
) {
  span {
    background: $oauth-login-bg;
  }

  &:hover,
  &:active,
  &:visited {
    text-decoration: none;
  }

  &:hover span {
    background: $oauth-login-bg-hover;
  }

  &:active span {
    background: darken($oauth-login-bg-hover, 5%);
  }
}

.sign-in-up {
  .sign-in-up-header h1 {
    margin-bottom: 4 * $vertical-height;
  }

  .sign-in-up-main-form-header {
    padding: 0 0 $vertical-height;

    small {
      @extend .body-font;
      line-height: 1;
      float: right;
      display: block;
      font-style: italic;
    }
  }

  .sign-in-up-or,
  .oauth-providers {
    @include make-col-ready;

    margin-top: auto;
    margin-bottom: auto;
  }

  .sign-in-up-or {
    display: none;

    h3 {
      margin: 0;
      text-align: center;
    }
  }

  .oauth-providers {
    .facebook-login {
      @include oauth-login-bar($facebook-login-color);
    }

    .globalid-login {
      @include oauth-login-bar(#0d51ff);
    }

    .strava-login {
      @include oauth-login-bar($strava-login-color);

      img {
        padding-top: 6px;
      }
    }

    .magic_link-login {
      @include oauth-login-bar($gray);
      i {
        font-size: 1.5em;
        padding-top: 12px;
        display: block;
        line-height: 0;
        text-align: center;
      }
    }

    a {
      display: flex;
      flex-wrap: wrap;
      margin: $vertical-height 0;
    }

    span {
      font-family: $header-font-family;
      font-weight: 400;
      font-style: normal;
      text-transform: uppercase;
      color: white;
      margin-bottom: 0;
    }

    .oauth-logo-block {
      height: 4 * $vertical-height;
      border-radius: $border-radius 0 0 $border-radius;
      flex: 0 0 16.6667%;
      padding: $vertical-height (0.5 * $vertical-height);
    }

    .oauth-text-block {
      border-radius: 0 $border-radius $border-radius 0;
      flex: 0 0 82.6666%;
      margin-left: 0.66667%;
      line-height: 1;
      padding: 17px 0 0 (3 * $vertical-height);
    }

    img {
      display: block;
      max-height: 100%;
      width: auto;
      margin: 0 auto;
    }
  }

  .main-form {
    @include make-col-ready;

    .checkbox input[type="checkbox"] {
      margin-top: 0.65rem;
    }

    a,
    h3.sign-in-up-main-form-header a {
      color: $body-font-color;
      font-weight: $strong-font-weight;

      &:hover,
      &:active,
      &.active {
        color: $body-font-color;
      }
    }

    .btn {
      padding-top: $vertical-height;
      padding-bottom: $vertical-height;
      margin: 0 auto;
      display: block;
      width: 250px;
    }

    p {
      margin: (2 * $vertical-height) 0 0;
    }
  }

  .terms-and-conditions a {
    cursor: pointer;
  }
}

@mixin small-screen-sign-up {
  .sign-in-up-wrap {
    background: $sign-in-up-form-bg;
    border: 1px solid $gray-lightish;
    border-radius: $border-radius;
    padding: (2 * $vertical-height) 0.9375rem;
  }
  .main-form .sign-in-up-main-form-header {
    font-size: 18px;
  }

  .oauth-providers,
  .main-form {
    @include make-col(12);
  }
  .oauth-providers a:last-of-type {
    margin-bottom: 2.5 * $vertical-height;
  }
}

@mixin large-screen-sign-up {
  .sign-in-up-or {
    display: block;
    width: 0;

    // Or else it overflows and breaks everything
    @include make-col-push(1);

    @include make-col(1);
  }

  .oauth-providers {
    @include make-col(5);

    @include make-col-push(7);
  }

  .sign-in-up-main-form-header {
    padding: 0;
  }

  .main-form {
    padding-top: 0;

    // Main form gets bg
    background: $sign-in-up-form-bg;
    border: 1px solid $gray-lightish;
    border-radius: $border-radius;
    padding-top: 2 * $vertical-height;
    padding-bottom: 2 * $vertical-height;
  }
}

//
// Partner sign-in-up is always small screen styled
.sign-in-up.with-partner {
  @include small-screen-sign-up;

  max-width: 660px;
  margin: 0 auto;

  // We want to put the omniauth sign up in reverse order
  .sign-in-up-wrap .row {
    flex-direction: column-reverse;
  }

  .oauth-providers {
    margin-top: $vertical-height;
  }

  .terms-and-conditions label {
    text-indent: -1rem;
    padding-left: 1rem;
  }
}

//
// XS screens where link to switch between login/signup breaks line
@media (max-width: 450px) {
  .sign-in-up {
    .main-form .sign-in-up-main-form-header {
      small {
        margin: -12px 0 6px;
        font-size: 13px;
        float: none;
        text-align: right;
      }
    }
    .oauth-providers .oauth-text-block {
      padding-left: $vertical-height;
    }
  }
}

//
// Small screens and larger
@media (max-width: $grid-breakpoint-md - 1px) {
  .sign-in-up.not-partner {
    @include small-screen-sign-up;
  }
}

//
// Large screen styles
@media (min-width: $grid-breakpoint-md) {
  .sign-in-up.not-partner {
    @include large-screen-sign-up;
  }
}

// Small awkward point where we need less padding to fit the buttons
@media (min-width: $grid-breakpoint-md) and (max-width: $grid-breakpoint-lg - 1px) {
  .sign-in-up.not-partner .oauth-providers .oauth-text-block {
    padding-left: $vertical-height;
  }
}

@media (min-width: $grid-breakpoint-md) and (max-width: $grid-breakpoint-xl - 1px) {
  .sign-in-up.not-partner {
    .main-form {
      @include make-col(6);

      @include make-col-pull(6);
    }
  }
}

//
// XL screen styles
@media (min-width: $grid-breakpoint-xl) {
  .sign-in-up.not-partner {
    .oauth-providers {
      @include make-col(4);
    }

    .sign-in-up-or {
      @include make-col-push(2);
    }

    .main-form {
      @include make-col(5);

      @include make-col-pull(4);
    }
  }
}
