@use 'apps/dashboard/src/variables' as *;

.container {
  height: 100%;
  position: relative;
  display: flex;

  .user-container {
    background: $color-light-stronger;
    display: flex;
    height: 100%;
    max-height: 100vh;
    overflow-y: auto;
    padding: rhythm(16) rhythm(4) 0;
    width: 50%;
    .logo {
      img {
        width: rhythm(13);
        margin-left: calc(-#{rhythm(2.5)});
      }
      padding-bottom: rhythm(2);
    }
    .inner-container {
      display: flex;
      flex-direction: column;
    }

    &:not(.left-aligned) {
      justify-content: center;
    }
  }
  .hero-img {
    width: 50%;
    height: 100%;
    max-height: 100vh;
  }
}

@media (max-width: $size-viewport-large-max) {
  .container {
    .user-container {
      width: 100%;
    }
    .hero-img {
      display: none;
    }
  }
}

@media (max-height: $height-viewport-medium-max) {
  .container .user-container {
    padding-top: rhythm(8);
  }
}
