@use "sass:math";

// local vars for dev simplicity
$auth-or-size: 70px;
$auth-or-font-size: 20px;

/**
 * Login modal
 */

.login-modal {
  text-align: center;

  .login-container {
    @include box-shadow(var(--#{$prefix}modal-box-shadow));
  }

  .modal-content {
    // reset bootstrap defaults
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  .authentication-client-ip {
    @include text-movie-subtitles();
  }
}


/**
 * Login page
 */

.login-page {
  // vertically center the login form in the page
  // if there is lots of space
  justify-content: center;
}

// In screen > SM, Claroline login form and SSO btns
// are displayed horizontally
.login-container {
  display: flex;
  flex-direction: row;
  width: 100%;

  // for cases when the auth block is not displayed in the login page
  max-width: floor(math.div($login-max-width, 2));
  &.login-with-sso {
    max-width: $login-max-width;
  }

  .form-group:last-child,
  .form-primary-section {
    margin-bottom: 0 !important;
  }

  .authentication-help {
    //font-style: italic;
    color: var(--#{$prefix}secondary-color);
    margin-bottom: 30px;
    text-align: center;
  }

  .authentication-column {
    position: relative;
    flex: 1;
    max-width: floor(math.div($login-max-width, 2));
    padding: 30px 45px;
  }

  .primary-external-authentication-column {
    margin-bottom: 30px;
  }

  .account-authentication-column {
    + .external-authentication-column {
      border-left: 1px solid $card-border-color;
      background-color: var(--#{$prefix}tertiary-bg);

      // create shadow for the "or" circle
      &::before {
        position: absolute;
        content: " ";
        left: 0;
        top: 50%;
        transform: translate(0, -50%);

        height: $auth-or-size;
        width: floor(math.div($auth-or-size, 2));
        border: 1px solid $card-border-color;
        border-radius: 0 floor(math.div($auth-or-size, 2)) floor(math.div($auth-or-size, 2)) 0;
      }
    }
  }

  .authentication-or {
    text-align: center;
    position: absolute;
    z-index: 2;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);

    font-size: $auth-or-font-size;
    line-height: 1;
    font-weight: 900;

    background: white;
    padding: floor(math.div($auth-or-size - $auth-or-font-size, 2)) 0;
    border-radius: floor(math.div($auth-or-size, 2));

    height: $auth-or-size;
    width: $auth-or-size;
  }
}

.authentication-client-ip {
  font-size: $font-size-sm;
  //font-style: italic;
  text-align: right;
  max-width: floor(math.div($login-max-width, 2));
  width: floor(math.div($login-max-width, 2));
  //margin: -($component-margin-bottom - 5) auto $component-margin-bottom;

  &.login-with-sso {
    max-width: $login-max-width;
    width: $login-max-width;
  }
}

@media (max-width: map-get($grid-breakpoints, 'sm')) {
  // In screen < SM, Claroline login form and SSO btns
  // are displayed vertically
  .login-container {
    flex-direction: column;

    +.login-with-sso {
      max-width: floor(math.div($login-max-width, 2));
    }

    .account-authentication-column {
      padding-bottom: 45px;

      + .external-authentication-column {
        border-left: none;
        border-top: 1px solid $card-border-color;
        padding-top: 45px;

        // create shadow for the "or" circle
        &::before {
          position: absolute;
          content: " ";
          left: 50%;
          top: 0;
          width: $auth-or-size;
          height: floor(math.div($auth-or-size, 2));
          transform: translate(-50%, 0);
          border-radius: 0 0 floor(math.div($auth-or-size, 2)) floor(math.div($auth-or-size, 2));
        }
      }
    }

    .authentication-or {
      right: 50%;
      top: auto;
      bottom: 0;
      transform: translate(50%, 50%);
    }
  }

  .btn-registration {
    &.login-with-sso {
      max-width: floor(math.div($login-max-width, 2));
    }
  }

  .authentication-client-ip {
    &.login-with-sso {
      max-width: floor(math.div($login-max-width, 2));
      width: floor(math.div($login-max-width, 2));
    }
  }
}

.btn-registration {
  align-self: center;
  //margin-bottom: $component-margin-bottom;
  // for cases when the auth block is not displayed in the login page
  max-width: floor(math.div($login-max-width, 2));
  &.login-with-sso {
    max-width: $login-max-width;
  }
}
