style.scss

@import '~client/shared/scss/typography';
@import '~client/shared/scss/colors';
@import '~client/shared/scss/elements/input-fields';

:local(.className) {
  overflow: hidden;
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
  width: 100%;

  input {
    box-sizing: border-box;
    font-family: $open-sans-light;
    font-size: 16px;
    padding: 10px 12px;
  }

  hgroup {
    text-align: center;
    margin-top: 35px;

    img {
      display: block;
      margin: 0 auto;
    }

    h1 {
      color: $gray-5;
      font-family: $open-sans-bold;
      font-size: 40px;
      margin: 0;
    }

    label {
      color: $content-color--light;
      font-family: $open-sans-light;
      font-size: 14px;
      letter-spacing: 0.5px;
    }
  }

  form {
    border-radius: 5px;
    margin: 6em auto;
    width: 450px;
  }

  .login-form-holder {
    margin: 0 auto;
    width: 340px;

    label {
      color: $main-blue;
      font-family: $open-sans-light;
      font-size: 15px;
      left: 0;
      pointer-events: none;
      position: absolute;
      top: -26px;
    }

    .group {
      margin-bottom: 45px;
      position: relative;

      &:nth-child(2) {
        margin-bottom: 35px;
      }
    }

    input:focus {
      outline: none;
    }

    .login-button {
      border-radius: 1px;
      cursor: pointer;
      font-size: 16px;
      letter-spacing: 0.5px;
      line-height: 20px;
      padding: 15px 24px;
      width: 100%;
      margin-bottom: 35px;
    }

    .forgot-login {
      text-align: center;
      font-family: $open-sans-light;
      font-size: $font-size--3;
        a {
          color: $main-blue;
        }
    }

    .login-button:focus {
      outline: 0;
    }
  }
}