@import '../_common';

.login-wrapper {
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: $border;
  padding: 40px 0;

  .login-icon {
    background: url('./img/login.png') center no-repeat transparent;
    background-size: contain;
    width: 106px;
    height: 130px;
    align-self: center;
  }
}

article.login {
  text-align: center;
  flex-grow: 0;
  border: 1px solid $title-fg;
  background: $main-bg;
  color: $main-fg;
  align-self: center;

  .content {
    align-items: center;
    align-self: center;
    padding: 20px 40px;
  }

  h5 {
    margin-bottom: 20px;
  }

  .loading-spinner {
    width: 240px;
    height: 50px;
    position: relative;
  }

  form {
    align-self: stretch;
    margin-bottom: 20px;
  }
}

.darkmodeon {
  .login-wrapper {
    background: $dark_border;
  }

  article.login {
    border: 1px solid $dark_title-fg;
    background: $dark_main-bg;
    color: $dark_main-fg;
  }
}