<commit_before>//
// Forms Base Styles
// --------------------------------------------------

$input-height: 2.625rem;
$input-height-small: 2rem;

// Adds some base custom styles to radio buttons and checkboxes. 
// In order to specify shape, border radius is applied 
// in class name for the element.
@mixin option-input-style {
  &:before {
    content: "";
    display: inline-block;
    width: .75rem;
    height: .75rem;
    margin-right: .375rem;
    position: relative;
    bottom: -1px;
    background-color: $fill-white;
    border: $border;
  }
}

.text-input,
.textarea,
.select,
.date-input {
  font-family: inherit;
  background: $fill-white;
  font-size: $text-4;
  height: $input-height;
  padding: .625rem .75rem;
  border: $border;
}

.select {
  background-image: svg-background($down-caret);
  background-repeat: no-repeat;
  background-position: calc(100% - 1rem) center;
  background-size: .6875rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  padding-right: 2.5rem;
  height: $input-height;
}

.select--small,
.text-input--small,
.date-input--small {
  font-size: $text-5; 
  height: $input-height-small;
  padding: $space-1 .625rem;
}


.select--small {
  padding: 0 $space-4 0 .625rem;
  background-size: .5rem;
}

.textarea {
  min-height: $input-height * 2;
  padding: .75rem; 
}

// hide system radio button in order to use custom style
.radio {
  @include visuallyhidden;

  + label {
    cursor: pointer; 
    display: block;
    @include option-input-style;

    &:before {   
      border-radius: 50%;
    }
  }
}

.radio:checked + label:before {
  background-color: $fill-white;
  border: 4px solid $fill-blue;
}

// hide system checkbox in order to use custom style
.checkbox {
  @include visuallyhidden;

  + label {
    cursor: pointer; 
    display: block;
    @include option-input-style;

    &:before { 
      border-radius: 30%;
    }
  }
  
}

.checkbox:checked + label:before {
  background-image: svg-background($checkmark);
  background-repeat: no-repeat;
  background-position: center;
  background-color: $fill-blue;
  background-size: .5rem; 
  border-style: none;
}

// labels, etc
.form-label {
  display: block;
  font-weight: $bold;
  margin-bottom: $space-1;
}

// form label small has less margin bottom than default size form labels 
// in order for the entire unit to scale down proportionately 
.form-label--small {
  font-size: $text-5;
  margin-bottom: .25rem;
}

.form-label--optional {
  color: $text-gray--lightest;
  font-weight: $regular;
}

.form-label--required {
  color: $text-red;
  font-weight: $regular;
}

.form-helper {
  color: $text-gray--lightest;
  display: block;
  margin-top: $space-1;
  font-size: $text-5; 
}

.form-feedback {
  display: block;
  margin-top: $space-1; 
  font-size: $text-5; 
}

.form-fieldset--warning {
  .form-feedback,
  .form-label {
    color: $text-orange;  
  }

  .text-input {
    border-color: $fill-orange; 
  }
}

.form-fieldset--success {
  .form-feedback,
  .form-label {
    color: $text-green;  
  }

  .form-feedback:before {
    content: "";
    height: .875rem;
    width: .875rem;
    display: inline-block;
    background-image: svg-background($checkmark);
    background-repeat: no-repeat;
    background-size: .5rem;
    background-color: $fill-green;
    border-radius: 50%;
    background-position: center;
    margin-right: .375rem;
    position: relative;
    bottom: -2px;
  }

  .text-input {
    border-color: $fill-green; 
  }
}

.form-fieldset--error {
  .form-feedback,
  .form-label {
    color: $text-red;  
  }

  .text-input {
    border-color: $fill-red; 
  }
}<commit_msg>select control warning, success, and error border<commit_after>//
// Forms Base Styles
// --------------------------------------------------

$input-height: 2.625rem;
$input-height-small: 2rem;

// Adds some base custom styles to radio buttons and checkboxes. 
// In order to specify shape, border radius is applied 
// in class name for the element.
@mixin option-input-style {
  &:before {
    content: "";
    display: inline-block;
    width: .75rem;
    height: .75rem;
    margin-right: .375rem;
    position: relative;
    bottom: -1px;
    background-color: $fill-white;
    border: $border;
  }
}

.text-input,
.textarea,
.select,
.date-input {
  font-family: inherit;
  background: $fill-white;
  font-size: $text-4;
  height: $input-height;
  padding: .625rem .75rem;
  border: $border;
}

.select {
  background-image: svg-background($down-caret);
  background-repeat: no-repeat;
  background-position: calc(100% - 1rem) center;
  background-size: .6875rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  padding-right: 2.5rem;
  height: $input-height;
}

.select--small,
.text-input--small,
.date-input--small {
  font-size: $text-5; 
  height: $input-height-small;
  padding: $space-1 .625rem;
}


.select--small {
  padding: 0 $space-4 0 .625rem;
  background-size: .5rem;
}

.textarea {
  min-height: $input-height * 2;
  padding: .75rem; 
}

// hide system radio button in order to use custom style
.radio {
  @include visuallyhidden;

  + label {
    cursor: pointer; 
    display: block;
    @include option-input-style;

    &:before {   
      border-radius: 50%;
    }
  }
}

.radio:checked + label:before {
  background-color: $fill-white;
  border: 4px solid $fill-blue;
}

// hide system checkbox in order to use custom style
.checkbox {
  @include visuallyhidden;

  + label {
    cursor: pointer; 
    display: block;
    @include option-input-style;

    &:before { 
      border-radius: 30%;
    }
  }
  
}

.checkbox:checked + label:before {
  background-image: svg-background($checkmark);
  background-repeat: no-repeat;
  background-position: center;
  background-color: $fill-blue;
  background-size: .5rem; 
  border-style: none;
}

// labels, etc
.form-label {
  display: block;
  font-weight: $bold;
  margin-bottom: $space-1;
}

// form label small has less margin bottom than default size form labels 
// in order for the entire unit to scale down proportionately 
.form-label--small {
  font-size: $text-5;
  margin-bottom: .25rem;
}

.form-label--optional {
  color: $text-gray--lightest;
  font-weight: $regular;
}

.form-label--required {
  color: $text-red;
  font-weight: $regular;
}

.form-helper {
  color: $text-gray--lightest;
  display: block;
  margin-top: $space-1;
  font-size: $text-5; 
}

.form-feedback {
  display: block;
  margin-top: $space-1; 
  font-size: $text-5; 
}

.form-fieldset--warning {
  .form-feedback,
  .form-label {
    color: $text-orange;  
  }

  .text-input,
  .select {
    border-color: $fill-orange; 
  }
}

.form-fieldset--success {
  .form-feedback,
  .form-label {
    color: $text-green;  
  }

  .form-feedback:before {
    content: "";
    height: .875rem;
    width: .875rem;
    display: inline-block;
    background-image: svg-background($checkmark);
    background-repeat: no-repeat;
    background-size: .5rem;
    background-color: $fill-green;
    border-radius: 50%;
    background-position: center;
    margin-right: .375rem;
    position: relative;
    bottom: -2px;
  }

  .text-input,
  .select {
    border-color: $fill-green; 
  }
}

.form-fieldset--error {
  .form-feedback,
  .form-label {
    color: $text-red;  
  }

  .text-input,
  .select {
    border-color: $fill-red;
  }
}
{'fraction_non_alphanumeric': 0.16104461371055495, 'fraction_numerical': 0.01958650707290533, 'mean_word_length': 2.622167487684729, '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': '1318495', 'n_tokens_mistral': 2753, 'n_tokens_neox': 2608, 'n_words': 597}