@use "../variables";

.fwe-login-layout {
  position: fixed;
  background: variables.$background;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  .fwe-login-background {
    top: variables.$navbar-height;
    position: absolute;
    height: calc(100vh - #{variables.$navbar-height});
    width: 100vw;
    object-fit: cover;
    object-position: center;
  }
  .fwe-login-container {
    height: calc(100vh - #{variables.$navbar-height});
    overflow: auto;
    display: flex;
    align-items: center;
    .fwe-login-form {
      z-index: 1;
      margin-left: 20%;
      width: 432px;
      background: variables.$white;
      padding: variables.$spacer-xl;
      h1 {
        margin: 0px 0px 48px 0px;
      }
      .fwe-login-link-container {
        margin-top: variables.$spacer-m;
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
      }
      @media (max-width: variables.$grid-breakpoint-xxs) {
        padding-left: variables.$spacer-s;
        padding-right: variables.$spacer-s;
      }
    }
  }
  @media (max-width: variables.$grid-breakpoint-xs), (max-height: variables.$grid-breakpoint-xs) {
    .fwe-login-container {
      background-color: variables.$white;
      position: unset;
      left: unset;
      top: unset;
      width: 100vw;
      align-items: stretch;
      .fwe-login-form {
        margin-left: 0px;
        width: 100%;
      }
    }
    .fwe-login-background {
      display: none;
    }
  }
}