<commit_before>.mui-input {
  position: relative;
  margin-top: 24px;
  margin-bottom: 48px;

  input, textarea {
    background-color: transparent;
    font-size: @input-font-size;
    border: 0;
    outline: none;
    border-bottom: 1px solid lightgray;
    padding: 0;
    box-sizing: border-box;
    padding-bottom: 14px;

    &[type='text'], &[type='password'], &[type='email'] {
      display: block;
      width: @input-width;
    }

    &:focus, &.mui-is-not-empty, &:disabled[value]:not([value=""]) {
      outline: none;
      box-shadow: none;
      &~.mui-input-placeholder {
        color: blue;
        font-size: @input-placeholder-size !important;
        font-weight: 300;
        top: -32px;
        .ease-out;
      }
      &~.mui-input-highlight {
        width: 0;
        background-color: blue;
        .ease-out;
      }
      &~.mui-input-bar {
        &::before, &::after {
          background-color: blue;
          width: 50%;
        }
      }
      &~.mui-input-description {
        display: block;
      }
    }

    &:not(:focus).mui-is-not-empty, &:disabled[value]:not([value=""]) {
      &+.mui-input-placeholder {
        color: gray;

        &+.mui-input-highlight {
          &+.mui-input-bar {
            &::before, &::after {
              width: 0;
            }

            &+.mui-input-description {
              display: none;
            }
          }
        }
      }
    }

    &+.mui-input-placeholder {
      font-size: @input-font-size;
      color: gray;
      position: absolute;
      top: -4px;
      //z-index: -1;
      .ease-out;
    }
  }

  .mui-input-highlight {
    content: '';
    position: absolute;
    background-color: transparent;
    opacity: 0.25;
    height: 19px;
    top: -3px;
    width: (@input-width/2);
    z-index: -1;
  }

  .mui-input-bar {
    position: relative;
    display: block;
    width: @input-width;

    &::before, &::after {
      content: '';
      height: @input-bar-height;
      top: (-1 * @input-bar-height);
      width: 0;
      position: absolute;
      .ease-out;
    }

    &::before {
      left: 50%;
    }

    &::after {
      right: 50%;
    }
  }

  .mui-input-description {
    display: none;
    color: blue;
    position: absolute;
  }

  .mui-input-error {
    display: none;
    color: @input-error-color;
    position: absolute;
  }

  &.mui-error {
    input, textarea {
      &:focus, &.mui-is-not-empty {
        &+.mui-input-placeholder {
          color: @input-error-color;

          &+.mui-input-highlight {
            width: 0;
            background-color: red;

            &+.mui-input-bar {

              &::before, &::after {
                background-color: @input-error-color;
              }

              &+.mui-input-description {
                display: none;
              }
            }
          }
        }
      }

    }

    .mui-input-error {
      display: block;
    }
  }

  &.mui-floating {
    margin-top: @desktop-gutter;
    input, textarea {
      &:focus {
        &+.mui-input-placeholder {
          display: block;
          color: gray;
          font-size: 16px !important;
          font-weight: 400;
          top: -4px;
        }

        &.mui-is-not-empty {
          &+.mui-input-placeholder {
            display: none;
          }
        }
      }

      &.mui-is-not-empty {
        &+.mui-input-placeholder {
          display: none;
        }
      }
    }
  }
  
  &.mui-disabled { opacity: 0.4 }
}

::-webkit-input-placeholder {
  //color: red !important;
  position: absolute !important;
  top: -20px !important;
}<commit_msg>Avoid breaking native input placeholder<commit_after>.mui-input {
  position: relative;
  margin-top: 24px;
  margin-bottom: 48px;

  input, textarea {
    background-color: transparent;
    font-size: @input-font-size;
    border: 0;
    outline: none;
    border-bottom: 1px solid lightgray;
    padding: 0;
    box-sizing: border-box;
    padding-bottom: 14px;

    &[type='text'], &[type='password'], &[type='email'] {
      display: block;
      width: @input-width;
    }

    &:focus, &.mui-is-not-empty, &:disabled[value]:not([value=""]) {
      outline: none;
      box-shadow: none;
      &~.mui-input-placeholder {
        color: blue;
        font-size: @input-placeholder-size !important;
        font-weight: 300;
        top: -32px;
        .ease-out;
      }
      &~.mui-input-highlight {
        width: 0;
        background-color: blue;
        .ease-out;
      }
      &~.mui-input-bar {
        &::before, &::after {
          background-color: blue;
          width: 50%;
        }
      }
      &~.mui-input-description {
        display: block;
      }
    }

    &:not(:focus).mui-is-not-empty, &:disabled[value]:not([value=""]) {
      &+.mui-input-placeholder {
        color: gray;

        &+.mui-input-highlight {
          &+.mui-input-bar {
            &::before, &::after {
              width: 0;
            }

            &+.mui-input-description {
              display: none;
            }
          }
        }
      }
    }

    &+.mui-input-placeholder {
      font-size: @input-font-size;
      color: gray;
      position: absolute;
      top: -4px;
      //z-index: -1;
      .ease-out;
    }
  }

  .mui-input-highlight {
    content: '';
    position: absolute;
    background-color: transparent;
    opacity: 0.25;
    height: 19px;
    top: -3px;
    width: (@input-width/2);
    z-index: -1;
  }

  .mui-input-bar {
    position: relative;
    display: block;
    width: @input-width;

    &::before, &::after {
      content: '';
      height: @input-bar-height;
      top: (-1 * @input-bar-height);
      width: 0;
      position: absolute;
      .ease-out;
    }

    &::before {
      left: 50%;
    }

    &::after {
      right: 50%;
    }
  }

  .mui-input-description {
    display: none;
    color: blue;
    position: absolute;
  }

  .mui-input-error {
    display: none;
    color: @input-error-color;
    position: absolute;
  }

  &.mui-error {
    input, textarea {
      &:focus, &.mui-is-not-empty {
        &+.mui-input-placeholder {
          color: @input-error-color;

          &+.mui-input-highlight {
            width: 0;
            background-color: red;

            &+.mui-input-bar {

              &::before, &::after {
                background-color: @input-error-color;
              }

              &+.mui-input-description {
                display: none;
              }
            }
          }
        }
      }

    }

    .mui-input-error {
      display: block;
    }
  }

  &.mui-floating {
    margin-top: @desktop-gutter;
    input, textarea {
      &:focus {
        &+.mui-input-placeholder {
          display: block;
          color: gray;
          font-size: 16px !important;
          font-weight: 400;
          top: -4px;
        }

        &.mui-is-not-empty {
          &+.mui-input-placeholder {
            display: none;
          }
        }
      }

      &.mui-is-not-empty {
        &+.mui-input-placeholder {
          display: none;
        }
      }
    }
  }
  
  &.mui-disabled { opacity: 0.4 }

  &::-webkit-input-placeholder {
    position: absolute !important;
    top: -20px !important;
  }

}
{'fraction_non_alphanumeric': 0.15529411764705883, 'fraction_numerical': 0.01245674740484429, 'mean_word_length': 1.4486614706879024, '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': '4015821', 'n_tokens_mistral': 2593, 'n_tokens_neox': 2428, 'n_words': 427}