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

.authentication-layout {
  width: 100%;
  min-height: 100vh;
  background-color: var(--pix-neutral-0);

  .authentication-layout__image {
    display: none;
  }

  .authentication-layout__main {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--pix-spacing-4x);
  }
}

@include breakpoints.device-is('tablet'){
  .authentication-layout {
    .authentication-layout__main {
      width: 70%;
      margin: 0 auto;
    }
  }
}

@include breakpoints.device-is('desktop') {
  .authentication-layout {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: var(--pix-spacing-6x);
      padding: var(--pix-spacing-6x);

      .authentication-layout__image {
        display: unset;
        grid-column: 1 / span 5;
        padding: var(--pix-spacing-4x);
        text-align: center;
        background: var(--pix-primary-500);
        border-radius: var(--pix-spacing-6x);

        > img {
          height: 100%;
        }
      }

      .authentication-layout__main {
        display: flex;
        flex-direction: column;
        grid-column: 7 / span 5;
        width: 100%;
        max-width: 800px;
        padding: 20px auto;
      }
  }
}



.authentication-layout-header {
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: space-between;

  .authentication-layout-header__pix-logo {
    width: 5rem;
  }
}

.authentication-layout-footer {
  width: 100%;
  margin-top: var(--pix-spacing-12x);

  .locale-switcher {
    margin-bottom: var(--pix-spacing-4x);
  }
}

