<commit_before>.input-row {
  position: relative;
  width: 100%;

  &.input-row-age {
    margin-top: 25px;
  }

  @include respond-to('reasonableUI') {
    margin-bottom: 12px;
  }

  @include respond-to('trustedUI') {
    margin-bottom: 9px;
  }

  &:hover input:focus {
    border-color: $input-row-focus-border-color;
  }

  &:hover input.invalid:focus {
    border-color: $error-background-color;
  }

  input {
    transition: border-color $short-transition,
                box-shadow $short-transition;

    // disable arrows on HTML5 number inputs
    &[type='number']::-webkit-inner-spin-button,
    &[type='number']::-webkit-outer-spin-button {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      margin: 0;
    }

    &[type='number'] {
      -moz-appearance: textfield;
    }

    &[type='email'],
    &[type='text'],
    &[type='number'],
    &[type='password'] {
      @include input-element();

      &:hover {
        border-color: $input-row-hover-border-color;
      }

      &:focus {
        border-color: $input-row-focus-border-color;
        box-shadow: 0 0 0 2px $input-row-focus-box-shadow-color;
      }

      &.invalid {
        border-color: $error-background-color;
        box-shadow: 0 0 0 2px rgba(lighten($error-background-color, 15), .75);
      }
    }

    html[dir='ltr'] & {
      padding: 0 0 0 $input-left-right-padding;
    }

    html[dir='rtl'] & {
      direction: rtl;
      padding: 0  $input-left-right-padding 0 0;
      unicode-bidi: bidi-override;
    }

    &[type='checkbox']:hover,
    &[type='checkbox']:focus {
      border: 1px solid $input-row-focus-border-color;
    }
  }

  &:last-child {
    margin-bottom: 0;
  }

  .input-help {
    color: $input-placeholder-color;
    margin-top: 6px;
    transition: opacity $medium-transition;

    &.input-help-complete-password {
      text-align: center;
    }

    @include respond-to('small') {
      font-size: $small-font;
    }
  }

  .input-help-forgot-pw {
    text-align: left;
  }

  .input-help-focused {
    @include respond-to('reasonableUI') {
      opacity: 0;
    }

    @include respond-to('trustedUI') {
      opacity: 1;
    }
  }

  input:focus ~ .input-help-focused,
  label:active ~ .input-help-focused,
  label:focus ~ .input-help-focused {
    color: $input-row-focus-border-color;
    opacity: 1;
  }

  .label-helper {
    color: $input-row-border-color;
  }

  .label-helper.focused {
    color: $input-row-focus-border-color;
  }
}
<commit_msg>fix(l10n): fix input type direction to match Gmail (#4070) r=vbudhram<commit_after>.input-row {
  position: relative;
  width: 100%;

  &.input-row-age {
    margin-top: 25px;
  }

  @include respond-to('reasonableUI') {
    margin-bottom: 12px;
  }

  @include respond-to('trustedUI') {
    margin-bottom: 9px;
  }

  &:hover input:focus {
    border-color: $input-row-focus-border-color;
  }

  &:hover input.invalid:focus {
    border-color: $error-background-color;
  }

  input {
    transition: border-color $short-transition,
                box-shadow $short-transition;

    // disable arrows on HTML5 number inputs
    &[type='number']::-webkit-inner-spin-button,
    &[type='number']::-webkit-outer-spin-button {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      margin: 0;
    }

    &[type='number'] {
      -moz-appearance: textfield;
    }

    &[type='email'],
    &[type='text'],
    &[type='number'],
    &[type='password'] {
      @include input-element();

      &:hover {
        border-color: $input-row-hover-border-color;
      }

      &:focus {
        border-color: $input-row-focus-border-color;
        box-shadow: 0 0 0 2px $input-row-focus-box-shadow-color;
      }

      &.invalid {
        border-color: $error-background-color;
        box-shadow: 0 0 0 2px rgba(lighten($error-background-color, 15), .75);
      }
    }

    html[dir='ltr'] & {
      padding: 0 0 0 $input-left-right-padding;
    }

    html[dir='rtl'] & {
      text-align: right;
      direction: ltr;
      padding: 0  $input-left-right-padding 0 0;
    }

    &[type='checkbox']:hover,
    &[type='checkbox']:focus {
      border: 1px solid $input-row-focus-border-color;
    }
  }

  &:last-child {
    margin-bottom: 0;
  }

  .input-help {
    color: $input-placeholder-color;
    margin-top: 6px;
    transition: opacity $medium-transition;

    &.input-help-complete-password {
      text-align: center;
    }

    @include respond-to('small') {
      font-size: $small-font;
    }
  }

  .input-help-forgot-pw {
    text-align: left;
  }

  .input-help-focused {
    @include respond-to('reasonableUI') {
      opacity: 0;
    }

    @include respond-to('trustedUI') {
      opacity: 1;
    }
  }

  input:focus ~ .input-help-focused,
  label:active ~ .input-help-focused,
  label:focus ~ .input-help-focused {
    color: $input-row-focus-border-color;
    opacity: 1;
  }

  .label-helper {
    color: $input-row-border-color;
  }

  .label-helper.focused {
    color: $input-row-focus-border-color;
  }
}

{'fraction_non_alphanumeric': 0.16312056737588654, 'fraction_numerical': 0.014578408195429472, 'mean_word_length': 2.298895386614685, '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': '6119918', 'n_tokens_mistral': 1921, 'n_tokens_neox': 1773, 'n_words': 301}