@use 'pix-design-tokens/fonts';
@use 'pix-design-tokens/breakpoints';

.login-or-register {
  margin: var(--pix-spacing-6x) 0;

  @include breakpoints.device-is('mobile') {
    margin: 12px 0;
  }

  &__locale-switcher {
    @include breakpoints.device-is('mobile') {
      margin-left: 22px;
    }
  }

  &__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--pix-spacing-4x);
    padding: 20px 2px;

    @include breakpoints.device-is('tablet') {
      padding: 20px;
    }

    @include breakpoints.device-is('large-screen') {
      padding: var(--pix-spacing-10x) 100px;
    }
  }
}

.login-or-register-panel {
  &__logo {
    display: flex;
    margin: auto;
  }

  &__invitation {
    margin-top: 24px;
    color: var(--pix-neutral-900);
    font-weight: 500;
    font-size: 1.125rem;
    font-family: fonts.$font-roboto;
    text-align: center;
  }

  &__forms-container {
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    min-height: 500px;
    margin-top: 10px;

    @include breakpoints.device-is('large-screen') {
      flex-flow: row;
      justify-content: space-between;
    }

    @include breakpoints.device-is('mobile') {
      flex-direction: column;
      margin: 10px 20px 0 20px;
    }
  }

  &__form {
    display: flex;
    flex-direction: column;

    @include breakpoints.device-is('tablet') {
      min-width: 360px;
    }
  }

  &__divider {
    margin-top: 30px;
    border-left: 1px solid var(--pix-neutral-100);

    @include breakpoints.device-is('tablet') {
      margin: 30px;
      margin-bottom: 0;
    }

    @include breakpoints.device-is('large-screen') {
      margin: 30px 60px 0 60px;
    }
  }
}

.login-or-register-panel-form {
  &__expandable {
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow-y: hidden;
    -webkit-transition: max-height 0.4s ease-in-out;
    -moz-transition: max-height 0.4s ease-in-out;
    -o-transition: max-height 0.4s ease-in-out;
    transition: max-height 0.4s ease-in-out;

    &--expanded {
      max-height: 720px;
    }
  }
}
