.auth-wrap {
  width: 100%;
}

// Outside login wrapper
.login {
  @include full-height;
  overflow-y: scroll;
  padding-top: $space-larger * 1.2;

  .login__hero {
    margin-bottom: $space-larger;

    .hero__logo {
      width: 180px;
    }

    .hero__title {
      font-weight: $font-weight-light;
      margin-top: $space-larger;
    }

    .hero__sub {
      color: $medium-gray;
      font-size: $font-size-medium;
    }
  }

  // Login box
  .login-box {
    @include background-white;
    @include border-normal;
    @include border-top-radius($space-smaller);
    @include border-right-radius($space-smaller);
    @include border-bottom-radius($space-smaller);
    @include border-left-radius($space-smaller);
    @include elegant-card;
    padding: $space-large;

    label {
      color: $color-gray;
      font-size: $font-size-default;

      input {
        padding: $space-slab;
        height: $space-larger;
        font-size: $font-size-default;
      }

      .error {
        font-size: $font-size-small;
      }
    }
  }

  .sigin__footer {
    font-size: $font-size-default;
    padding: $space-medium;

    > a {
      font-weight: $font-weight-bold;
    }
  }
}