<commit_before>/*------------------------------------*\
    #TWITTER TYPEAHEAD
\*------------------------------------*/
/**
 * Using Twitter Typeahead to autocomplete pattern
 * searches. https://twitter.github.io/typeahead.js/
 * 1) Wrapped in pl-c-header to contain styles for projects that 
 *    might already be using Typeahead
*/

.pl-c-header {
  /**
     * Typeahead input
     * 1) the primary DOM element that initiates the JS library 
     */
  .pl-c-typeahead {
    border: 0;
    background: $pl-color-gray-87 !important;
    color: $pl-color-gray-50;
    width: 100%;
    right: 0;
    padding: 0.61rem 0.5rem;
    font-size: inherit;

    &:focus {
      background: $pl-color-gray-50;
      color: $pl-color-white;
    }
  }

  /**
     * Typeahead wrapper
     * 1) This is the JS-generated wrapper around the input
     * 2) Display after nav list items for horizontal theme
     */
  .twitter-typeahead {
    display: flex !important;
    order: 2; /* 2 */
    width: 100%;
  }

  .tt-input {
    background: $pl-color-gray-50;
    color: $pl-color-white;

    &:hover {
      color: $pl-color-white;
      background: $pl-color-gray-87 !important;

      &::-webkit-input-placeholder {
        color: $pl-color-white;
      }

      &::-moz-input-placeholder {
        color: $pl-color-white;
      }
    }

    &:focus {
      border-radius: 0;
      text-transform: lowercase;
      color: $pl-color-white;
      background: $pl-color-gray-87;
      outline: 1px dotted $pl-color-gray-50;
      outline-offset: -1px;
    }
  }

  .tt-hint {
    text-transform: lowercase;
  }

  .tt-dropdown-menu {
    text-transform: lowercase;
    background-color: $pl-color-gray-50;
    width: 100%;
    border-bottom-right-radius: $pl-border-radius-med;
    border-bottom-left-radius: $pl-border-radius-med;
  }

  .tt-suggestion {
    color: $pl-color-gray-07;
    padding: 0.8em;
  }

  .tt-suggestion.tt-cursor {
    color: $pl-color-white;
    background: $pl-color-trans-white-25;
  }

  .tt-suggestion p {<commit_msg>fix: update typeahead selector so styles work as expected<commit_after>/*------------------------------------*\
    #TWITTER TYPEAHEAD
\*------------------------------------*/
/**
 * Using Twitter Typeahead to autocomplete pattern
 * searches. https://twitter.github.io/typeahead.js/
 * 1) Wrapped in pl-c-header to contain styles for projects that 
 *    might already be using Typeahead
*/

.pl-c-header {
  /**
     * Typeahead input
     * 1) the primary DOM element that initiates the JS library 
     */
  .pl-c-typeahead {
    border: 0;
    background: $pl-color-gray-87 !important;
    color: $pl-color-gray-50;
    width: 100%;
    right: 0;
    padding: 0.61rem 0.5rem;
    font-size: inherit;

    &:focus {
      background: $pl-color-gray-50;
      color: $pl-color-white;
    }
  }

  /**
     * Typeahead wrapper
     * 1) This is the JS-generated wrapper around the input
     * 2) Display after nav list items for horizontal theme
     */
  .twitter-typeahead {
    display: flex !important;
    order: 2; /* 2 */
    width: 100%;
  }

  .tt-input {
    background: $pl-color-gray-50;
    color: $pl-color-white;

    &:hover {
      color: $pl-color-white;
      background: $pl-color-gray-87 !important;

      &::-webkit-input-placeholder {
        color: $pl-color-white;
      }

      &::-moz-input-placeholder {
        color: $pl-color-white;
      }
    }

    &:focus {
      border-radius: 0;
      text-transform: lowercase;
      color: $pl-color-white;
      background: $pl-color-gray-87;
      outline: 1px dotted $pl-color-gray-50;
      outline-offset: -1px;
    }
  }

  .tt-hint {
    text-transform: lowercase;
  }

  .tt-menu {
    text-transform: lowercase;
    background-color: $pl-color-gray-50;
    width: 100%;
    border-bottom-right-radius: $pl-border-radius-med;
    border-bottom-left-radius: $pl-border-radius-med;
  }

  .tt-suggestion {
    color: $pl-color-gray-07;
    padding: 0.8em;
  }

  .tt-suggestion.tt-cursor {
    color: $pl-color-white;
    background: $pl-color-trans-white-25;
  }

  .tt-suggestion p {
{'fraction_non_alphanumeric': 0.17353156227150865, 'fraction_numerical': 0.022910065805508164, 'mean_word_length': 1.956772334293948, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, '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': '373881', 'n_tokens_mistral': 1498, 'n_tokens_neox': 1376, 'n_words': 304}