<commit_before>.login-modal {
  @include container;
  position: relative;

  padding: rhythm(4);
  background: $greyColor;
  border-radius: 0.5em;
  border: 1px solid $mediumGreyColor;

  .error-msg {
    @include span(12);
    margin-bottom: rhythm(4);

    p {
      width: 100%;
      margin: 0;
    }

  }

  .close-modal-button {
    position: absolute;
    background: $white;
    border: 1px solid $blackColor;
    border-radius: 1em;
    width: 2em;
    height: 2em;
    top: -1em;
    right: -1em;
    font-size: 1em;
    padding: 0;
    margin: 0;

    &:hover {
      background: $darkGreyColor;
      color: $white;
    }

  }

  h1 {
    @include span(12);
    text-align: center;
    @include semiBoldFont;
    margin: 0;
    font-size: rhythm(4);
    font-size: normal;
  }

  .form-item {
    @include span(12);
    @include container;
  }

  label {
    @include span(8);
    @include push(2);
  }

  input {
    @include span(8);
    @include push(2);
    font-size: rhythm(3);
  }

  p {
    @include span(8);
    @include push(2);
  }

  .form-item, p {
    margin-top: rhythm(1);
    margin-bottom: rhythm(1);
  }

  .forgot-pin {
    font-size: rhythm(3);
  }

  .cancel-link {
    margin-left: rhythm(5);
  }

}

@include breakpoint($small) {

  .login-modal {

    label {
      @include span(6);
      @include push(3);
    }

    input {
      @include span(6);
      @include push(3);
      font-size: rhythm(3);
    }

    p {
      @include span(6);
      @include push(3);
    }

  }

}

@include breakpoint($medium) {

  .login-modal {

    label {
      @include span(4);
      @include push(4);
    }

    input {
      @include span(4);
      @include push(4);
      font-size: rhythm(3);
    }

    p {
      @include span(4);
      @include push(4);
    }

  }

}

@include breakpoint($large) {

  .login-modal {

    label {
      @include span(2);
      @include push(5);
    }

    input {
      @include span(2);
      @include push(5);
      font-size: rhythm(3);
    }

    p {
      @include span(2);
      @include push(5);
    }

  }

}<commit_msg>DEICH-12 Patron client - Adjust width of login modal wrapper to screen size<commit_after>.login-modal {
  @include container;
  position: relative;

  padding: rhythm(4);
  background: $greyColor;
  border-radius: 0.5em;
  border: 1px solid $mediumGreyColor;

  .error-msg {
    @include span(12);
    margin-bottom: rhythm(4);

    p {
      width: 100%;
      margin: 0;
    }

  }

  .close-modal-button {
    position: absolute;
    background: $white;
    border: 1px solid $blackColor;
    border-radius: 1em;
    width: 2em;
    height: 2em;
    top: -1em;
    right: -1em;
    font-size: 1em;
    padding: 0;
    margin: 0;

    &:hover {
      background: $darkGreyColor;
      color: $white;
    }

  }

  h1 {
    @include span(12);
    text-align: center;
    @include semiBoldFont;
    margin: 0;
    font-size: rhythm(4);
    font-size: normal;
  }

  .form-item {
    @include span(12);
    @include container;
  }

  label {
    @include span(8);
    @include push(2);
  }

  input {
    @include span(8);
    @include push(2);
    font-size: rhythm(3);
  }

  p {
    @include span(8);
    @include push(2);
  }

  .form-item, p {
    margin-top: rhythm(1);
    margin-bottom: rhythm(1);
  }

  .forgot-pin {
    font-size: rhythm(3);
  }

  .cancel-link {
    margin-left: rhythm(5);
  }

}

@include breakpoint($small) {

  .login-modal-wrapper {

    .modal-content {
      @include span(8);
      @include push(2);
    }

  }

  // Keeping for reference
  // .login-modal {

  //   label {
  //     @include span(6);
  //     @include push(3);
  //   }

  //   input {
  //     @include span(6);
  //     @include push(3);
  //     font-size: rhythm(3);
  //   }

  //   p {
  //     @include span(6);
  //     @include push(3);
  //   }

  // }

}

@include breakpoint($medium) {

  .login-modal-wrapper {

    .modal-content {
      @include span(6);
      @include push(3);
    }

  }

  // Keeping for reference
  // .login-modal {

  //   label {
  //     @include span(4);
  //     @include push(4);
  //   }

  //   input {
  //     @include span(4);
  //     @include push(4);
  //     font-size: rhythm(3);
  //   }

  //   p {
  //     @include span(4);
  //     @include push(4);
  //   }

  // }

}

@include breakpoint($large) {

  .login-modal-wrapper {

    .modal-content {
      @include span(4);
      @include push(4);
    }

  }

  // Keeping for reference
  // .login-modal {

  //   label {
  //     @include span(2);
  //     @include push(5);
  //   }

  //   input {
  //     @include span(2);
  //     @include push(5);
  //     font-size: rhythm(3);
  //   }

  //   p {
  //     @include span(2);
  //     @include push(5);
  //   }

  // }

}
{'fraction_non_alphanumeric': 0.1657262277951933, 'fraction_numerical': 0.026332288401253918, 'mean_word_length': 1.741122565864834, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '376936', 'n_tokens_mistral': 1894, 'n_tokens_neox': 1781, 'n_words': 362}