<commit_before>@import "compass";
$experimental-support-for-svg: true;

.eui-input,
.eui-textarea {
  display: inline-block;
  vertical-align: middle;
  padding: 1px;
  font-family: "Helvetica Neue", Helvetica, Arial, Tahoma, sans-serif;

  .eui-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  }

  input,
  textarea {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    padding: 0;
    border: none;
    box-sizing: border-box;
    font-family: "Helvetica Neue", Helvetica, Arial, Tahoma, sans-serif;
    resize: none;
  }

  label {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    cursor: text;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
  }
}


/* SIZES */
.eui-input,
.eui-textarea {
  &.eui-tiny {
    border-radius: 3px;
    font-size: 9px;

    .eui-wrapper {
      height: 18px;
      line-height: 18px;
    }

    input,
    textarea {
      border-radius: 3px;
      padding: 3px 4px;
      font-size: inherit;
    }

    label {
      padding: 0 4px;
    }
  }

  &.eui-small {
    border-radius: 3px;
    font-size: 11px;

    .eui-wrapper {
      height: 25px;
      line-height: 25px;
    }

    input,
    textarea {
      border-radius: 3px;
      padding: 6px 5px;
      font-size: inherit;
    }

    label {
      padding: 0 5px;
    }
  }

  &.eui-medium {
    border-radius: 4px;
    font-size: 14px;

    .eui-wrapper {
      height: 35px;
      line-height: 35px;
    }

    input,
    textarea {
      border-radius: 4px;
      padding: 10px 7px;
      font-size: inherit;
    }

    label {
      padding: 0 7px;
    }
  }

  &.eui-large {
    border-radius: 5px;
    font-size: 17px;

    .eui-wrapper {
      height: 45px;
      line-height: 45px;
      font-size: 17px;
    }

    input,
    textarea {
      border-radius: 5px;
      padding: 12px 9px;
      font-size: inherit;
    }

    label {
      padding: 0 9px;
    }
  }
}

.eui-textarea .eui-wrapper { height: 100% !important;}


/*
  * TYPES
  *
  * Default: White inputs
  *
  */
.eui-input,
.eui-textarea {
  /* Default */
  &.eui-default {
    @include background-image(linear-gradient(top,  rgba(0, 0, 0, 0.3) 0%,  rgba(0, 0, 0, 0.15) 100%));

    label {
      color: #b9b9b9;
    }

    input,
    textarea {
      color: #303030;
      box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.1);
      @include background-image(linear-gradient(top, rgba(241,241,241,1) 0%,rgba(255,255,255,1) 50%));
    }

    /* disabled */
    input:disabled,
    textarea:disabled {
      background: #f6f6f6;
      color: #777777;
    }
  }

  /* focus */
  input:focus,
  textarea:focus {
    margin: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border: solid 1px #7fb5ff;
    box-shadow:
      0px 0px 4px #0090ff,
      inset 0px 2px 3px rgba(0, 0, 0, 0.1);
    outline: none;
  }
}


/* ERROR */
.eui-input.eui-error input,
.eui-textarea.eui-error textarea {
  margin: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: solid 1px #ff7f7f;
  box-shadow:
    0px 0px 4px #ff0000,
    inset 0px 2px 3px rgba(0, 0, 0, 0.1);
  outline: none;
}<commit_msg>ensure a input in error state always highlights red even on focus<commit_after>@import "compass";
$experimental-support-for-svg: true;

.eui-input,
.eui-textarea {
  display: inline-block;
  vertical-align: middle;
  padding: 1px;
  font-family: "Helvetica Neue", Helvetica, Arial, Tahoma, sans-serif;

  .eui-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  }

  input,
  textarea {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    padding: 0;
    border: none;
    box-sizing: border-box;
    font-family: "Helvetica Neue", Helvetica, Arial, Tahoma, sans-serif;
    resize: none;
  }

  label {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    cursor: text;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
  }
}


/* SIZES */
.eui-input,
.eui-textarea {
  &.eui-tiny {
    border-radius: 3px;
    font-size: 9px;

    .eui-wrapper {
      height: 18px;
      line-height: 18px;
    }

    input,
    textarea {
      border-radius: 3px;
      padding: 3px 4px;
      font-size: inherit;
    }

    label {
      padding: 0 4px;
    }
  }

  &.eui-small {
    border-radius: 3px;
    font-size: 11px;

    .eui-wrapper {
      height: 25px;
      line-height: 25px;
    }

    input,
    textarea {
      border-radius: 3px;
      padding: 6px 5px;
      font-size: inherit;
    }

    label {
      padding: 0 5px;
    }
  }

  &.eui-medium {
    border-radius: 4px;
    font-size: 14px;

    .eui-wrapper {
      height: 35px;
      line-height: 35px;
    }

    input,
    textarea {
      border-radius: 4px;
      padding: 10px 7px;
      font-size: inherit;
    }

    label {
      padding: 0 7px;
    }
  }

  &.eui-large {
    border-radius: 5px;
    font-size: 17px;

    .eui-wrapper {
      height: 45px;
      line-height: 45px;
      font-size: 17px;
    }

    input,
    textarea {
      border-radius: 5px;
      padding: 12px 9px;
      font-size: inherit;
    }

    label {
      padding: 0 9px;
    }
  }
}

.eui-textarea .eui-wrapper { height: 100% !important;}


/*
  * TYPES
  *
  * Default: White inputs
  *
  */
.eui-input,
.eui-textarea {
  /* Default */
  &.eui-default {
    @include background-image(linear-gradient(top,  rgba(0, 0, 0, 0.3) 0%,  rgba(0, 0, 0, 0.15) 100%));

    label {
      color: #b9b9b9;
    }

    input,
    textarea {
      color: #303030;
      box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.1);
      @include background-image(linear-gradient(top, rgba(241,241,241,1) 0%,rgba(255,255,255,1) 50%));
    }

    /* disabled */
    input:disabled,
    textarea:disabled {
      background: #f6f6f6;
      color: #777777;
    }
  }

  /* focus */
  input:focus,
  textarea:focus {
    margin: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border: solid 1px #7fb5ff;
    box-shadow:
      0px 0px 4px #0090ff,
      inset 0px 2px 3px rgba(0, 0, 0, 0.1);
    outline: none;
  }
}


/* ERROR */
.eui-input.eui-error input,
.eui-input.eui-error input:focus,
.eui-textarea.eui-error textarea,
.eui-textarea.eui-error textarea:focus {
  margin: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: solid 1px #ff7f7f;
  box-shadow:
    0px 0px 4px #ff0000,
    inset 0px 2px 3px rgba(0, 0, 0, 0.1);
  outline: none;
}
{'fraction_non_alphanumeric': 0.14379671150971599, 'fraction_numerical': 0.058893871449925264, 'mean_word_length': 2.024864376130199, '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': '3505193', 'n_tokens_mistral': 3040, 'n_tokens_neox': 2625, 'n_words': 595}