sparkletown/sparkle

@import "scss/constants.scss";

$side-padding: 30px;
$large-shadow: box-shadow--large(var(--content--under-30a));
$border-radius: 28px;
$auth-body-max-width: 365px;
$auth-icon-sso-size: 35px;
$auth-error-container-height: 80px;
$auth-icon-top-margin: 5px;

.Login {
  &__login-box {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-bottom: $spacing--md;
  }

  &__alternative-logins {
    outline: none !important;
    border: none;
    border-width: 0;
    background: none;

    &:focus {
      opacity: 0.8;
    }

    margin-top: $spacing--md;
    display: flex;
    justify-content: center;
    margin-bottom: $spacing--xs;
  }

  &__quick-login-icon {
    height: 50px;
    width: 50px;

    &:hover {
      cursor: pointer;
      opacity: 0.8;
    }
  }
}

.auth-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  background-color: $secondary--dark;
  height: 100vh;

  .logo-container {
    width: $auth-container-max-width / 2;
    padding-bottom: 50px;
  }

  .auth-form-container {
    .form-container {
      display: inline-table;
      flex: 0;
      width: $auth-container-max-width;
      margin: 0 auto;
      padding: $side-padding;
      background-color: var(--greyscale-darker-50pp);
      box-shadow: $large-shadow;
      text-align: center;
      border-radius: $border-radius;

      .auth-submit-error {
        margin: $spacing--md auto;
        max-width: $auth-body-max-width;
        background: rgba(221, 75, 57, 0.49);
        border-radius: $border-radius--lg;
        min-height: $auth-error-container-height;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        word-break: break-word;

        &__message {
          width: 80%;
        }
      }
      .form {
        margin: 2rem auto $spacing--lg auto;
        max-width: $auth-body-max-width;

        .input-info {
          align-self: baseline;
        }
      }

      .auth-input {
        max-width: $auth-body-max-width;

        &.register {
          background: $login-rainbox-gradient;
        }
      }

      .social-auth-container {
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;

        span {
          margin-bottom: $spacing--lg;
        }

        .social-icon {
          @include square-size($auth-icon-sso-size);

          background-color: opaque-white(0.69);
          float: left;
          border-radius: 50%;
          display: flex;
          margin-top: -($auth-icon-top-margin);
          justify-content: center;
          align-items: center;
          position: absolute;

          img {
            height: 20px;
            width: $spacing--lg;
          }
        }
      }
    }

    .register-form-title {
      font-weight: 900;
      font-size: 2em;
    }
  }
}