mitjajez/SONCE

@import '../stylesheets/utils.less';

.page.auth {
  text-align: center;

  .content-scrollable { background: @color-tertiary; }

  .wrapper-auth {
    padding-top: 4em;

    @media screen and (min-width: 40em) {
      margin: 0 auto;
      max-width: 480px;
      width: 80%;
    }

    .title-auth {
      .font-l1;
      .type-light;
      color: @color-ancillary;
      margin-bottom: .75rem;
    }

    .subtitle-auth {
      color: @color-medium-well;
      margin: 0 15% 3rem;
    }

    form {
      .input {
        margin-bottom: 1px;
        width: 100%;
        display: block;

        input {
          width: 100%;
          padding: .75rem;
        }
      }

      label {
        display: none;
      }

      .btn-primary {
        margin: 1em 5% 0;
        width: 90%;

        @media screen and (min-width: 40em) {
          margin-left: 0;
          margin-right: 0;
          width: 100%;
        }
      }

      .at-pwd-link {
        margin-top: 1em;
      }
    }
    .list-errors {
      margin-top: -2rem;
      .list-item {
        .title-caps;
        background: @color-note;
        color: @color-negative;
        font-size: .625em; // 10px
        margin-bottom: 1px;
        padding: .7rem 0;
      }
    }

    .at-message, .at-result {
      margin-top: -2rem;
      .title-caps;
      background: @color-note;
      color: @color-ancillary;
      font-size: .625em; // 10px
      margin-bottom: 1px;
      padding: .7rem 0;
    }
  }

  .at-signup-link, .at-signin-link {
    .font-s1;
    .position(absolute, auto, 0, 1em, 0);
    color: @color-medium;
    display: inline-block;

    @media screen and (min-width: 40em) {
      bottom: 0;
      margin-top: 1rem;
      position: relative;
    }
  }
}