<commit_before>$gradientGrey: linear-gradient(#FAFAFA, #E0E0E0);
$gradientMediumGrey: linear-gradient(#FAFAFA, #A7ABAB);
$coolGrey: #D0D0D0;
$darkGrey: #767C7E;
$mediumGrey: #A7ABAB;
$charcoal: #2D373C;
$cerulean: #009bde;
$vermillion: #C93132;


$font-size: 15px !default;
$font-weight: normal !default;
$font-family: sans-serif !default;

$input-height: 38px !default;
$input-height-small: 30px !default;
$input-min-width: 150px !default;

$input-border-radius: 5px !default;
$input-font-size: 15px !default;

$input-background: $gradientGrey !default;
$input-border-color: $coolGrey !default;
$input-color: $mediumGrey !default;
$input-icon-color: $mediumGrey !default;

$input-background-hover: $gradientMediumGrey !default;
$input-border-color-hover: $input-border-color !default;
$input-color-hover: $charcoal !default;
$input-icon-color-hover: $charcoal !default;

$input-background-open: $gradientMediumGrey !default;
$input-border-color-open: $cerulean !default;
$input-color-open: $darkGrey !default;
$input-icon-color-open: $charcoal !default;

$input-color-has-value: $charcoal !default;

$input-button-background-color: transparent !default;
$input-button-background-color-hover: transparent !default;
$input-button-icon-size: 15px !default;
$input-clear-button-icon-size: 16px !default;
$input-clear-button-color: $mediumGrey !default;
$input-clear-button-color-hover: $vermillion !default;

$input-opacity-disabled: .6 !default;


.react-datepicker-component {
  position: relative;

  .react-datepicker {
    margin-left: 5px;
    margin-top: 5px;
    display: inherit;
  }
}

// INPUT

.react-datepicker-input {
  position: relative;
  min-width: $input-min-width;
  height: $input-height;
  background: $input-background;
  border: 1px solid $input-border-color;
  border-radius: $input-border-radius;
  &.is-small {
    height: $input-height-small;
  }
  input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 60px;
    font-size: $input-font-size;
    color: $input-color;
    &:focus {
      outline: none;
    }
  }
  &:hover {
    background: $input-background-hover;
    border: 1px solid $input-border-color-hover;
    input {
      color: $input-color-hover;
    }
  }
  &.is-open {
    background: $input-background-open;
    border: 1px solid $input-border-color-open;
    input {
      color: $input-color-open;
    }
  }
  &.has-value input {
    color: $input-color-has-value;
  }
  &.is-disabled {
    opacity: $input-opacity-disabled;
  }

  .button-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
  }

  .input-button {
    margin: 0;
    height: 100%;
    width: 50px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    background-color: $input-button-background-color;
    font-size: input-button-icon-size;
    border-radius: 0 $input-border-radius $input-border-radius 0;
    cursor: pointer;
  }

  .input-button:hover {
    background-color: $input-button-background-color-hover;
  }

  .clear-button {
    margin-right: 10px;
    cursor: pointer;
    font-size: $input-clear-button-icon-size;
    color: $input-clear-button-color;
    &:hover {
      color: $input-clear-button-color-hover;
    }
  }
}


// DATEPICKER

.react-datepicker.floating {
  position: absolute;
  z-index: 10000;
}

.react-datepicker {<commit_msg>use background instead of background-color<commit_after>$gradientGrey: linear-gradient(#FAFAFA, #E0E0E0);
$gradientMediumGrey: linear-gradient(#FAFAFA, #A7ABAB);
$coolGrey: #D0D0D0;
$darkGrey: #767C7E;
$mediumGrey: #A7ABAB;
$charcoal: #2D373C;
$cerulean: #009bde;
$vermillion: #C93132;


$font-size: 15px !default;
$font-weight: normal !default;
$font-family: sans-serif !default;

$input-height: 38px !default;
$input-height-small: 30px !default;
$input-min-width: 150px !default;

$input-border-radius: 5px !default;
$input-font-size: 15px !default;

$input-background: $gradientGrey !default;
$input-border-color: $coolGrey !default;
$input-color: $mediumGrey !default;
$input-icon-color: $mediumGrey !default;

$input-background-hover: $gradientMediumGrey !default;
$input-border-color-hover: $input-border-color !default;
$input-color-hover: $charcoal !default;
$input-icon-color-hover: $charcoal !default;

$input-background-open: $gradientMediumGrey !default;
$input-border-color-open: $cerulean !default;
$input-color-open: $darkGrey !default;
$input-icon-color-open: $charcoal !default;

$input-color-has-value: $charcoal !default;

$input-button-background-color: transparent !default;
$input-button-background-color-hover: transparent !default;
$input-button-icon-size: 15px !default;
$input-clear-button-icon-size: 16px !default;
$input-clear-button-color: $mediumGrey !default;
$input-clear-button-color-hover: $vermillion !default;

$input-opacity-disabled: .6 !default;


.react-datepicker-component {
  position: relative;

  .react-datepicker {
    margin-left: 5px;
    margin-top: 5px;
    display: inherit;
  }
}

// INPUT

.react-datepicker-input {
  position: relative;
  min-width: $input-min-width;
  height: $input-height;
  background: $input-background;
  border: 1px solid $input-border-color;
  border-radius: $input-border-radius;
  &.is-small {
    height: $input-height-small;
  }
  input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 60px;
    font-size: $input-font-size;
    color: $input-color;
    &:focus {
      outline: none;
    }
  }
  &:hover {
    background: $input-background-hover;
    border: 1px solid $input-border-color-hover;
    input {
      color: $input-color-hover;
    }
  }
  &.is-open {
    background: $input-background-open;
    border: 1px solid $input-border-color-open;
    input {
      color: $input-color-open;
    }
  }
  &.has-value input {
    color: $input-color-has-value;
  }
  &.is-disabled {
    opacity: $input-opacity-disabled;
  }

  .button-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
  }

  .input-button {
    margin: 0;
    height: 100%;
    width: 50px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    background: $input-button-background-color;
    font-size: input-button-icon-size;
    border-radius: 0 $input-border-radius $input-border-radius 0;
    cursor: pointer;
  }

  .input-button:hover {
    background: $input-button-background-color-hover;
  }

  .clear-button {
    margin-right: 10px;
    cursor: pointer;
    font-size: $input-clear-button-icon-size;
    color: $input-clear-button-color;
    &:hover {
      color: $input-clear-button-color-hover;
    }
  }
}


// DATEPICKER

.react-datepicker.floating {
  position: absolute;
  z-index: 10000;
}

.react-datepicker {
{'fraction_non_alphanumeric': 0.15197359372851052, 'fraction_numerical': 0.02090496492917068, 'mean_word_length': 3.533665835411471, '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': '7507408', 'n_tokens_mistral': 2803, 'n_tokens_neox': 2600, 'n_words': 502}