<commit_before>// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// People Picker styles

$personaItemHeight: 42px;


.ms-PeoplePicker {
  @include ms-font-m;
  @include ms-u-normalize;
  background-color: $ms-color-white;
  margin-bottom: 10px;
}

// Box that contains the search field and selected people.
.ms-PeoplePicker-searchBox {
  @include ms-u-clearfix;
  border: 1px solid $ms-color-neutralTertiaryAlt;
  box-sizing: border-box;
  min-height: 40px;
  width: 100%;

  &:hover {
    border-color: $ms-color-neutralSecondaryAlt;
  }
}

// Highlight the search box when the people picker is active
.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox {
  border-color: $ms-color-themePrimary;
}

// The search field.
.ms-PeoplePicker-searchField {
  border: 0;
  box-sizing: border-box;
  display: inline-block;
  float: left;
  height: 38px;
  outline: none;
  padding-left: 8px;
  width: 100%;
}

// A selected persona, which appears within the search field.
.ms-PeoplePicker-persona {
  display: inline-block;
  float: left;
  margin: 4px;

  //TODO: Avoid styling child components like this.
  .ms-Persona {
    background-color: $ms-color-neutralLighter;
    float: left;
    min-height: 30px;
  }
}

// The selected persona may be in an error state.
.ms-PeoplePicker-persona.has-error {
  .ms-Persona-primaryText {
    color: $ms-color-error;<commit_msg>Add outline to peoplepicker tokens<commit_after>// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// People Picker styles

$personaItemHeight: 42px;


.ms-PeoplePicker {
  @include ms-font-m;
  @include ms-u-normalize;
  background-color: $ms-color-white;
  margin-bottom: 10px;
}

// Box that contains the search field and selected people.
.ms-PeoplePicker-searchBox {
  @include ms-u-clearfix;
  border: 1px solid $ms-color-neutralTertiaryAlt;
  box-sizing: border-box;
  min-height: 40px;
  width: 100%;

  &:hover {
    border-color: $ms-color-neutralSecondaryAlt;
  }
}

// Highlight the search box when the people picker is active
.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox {
  border-color: $ms-color-themePrimary;
}

// The search field.
.ms-PeoplePicker-searchField {
  border: 0;
  box-sizing: border-box;
  display: inline-block;
  float: left;
  height: 38px;
  outline: none;
  padding-left: 8px;
  width: 100%;
}

// A selected persona, which appears within the search field.
.ms-PeoplePicker-persona {
  display: inline-block;
  float: left;
  margin: 4px;
  outline: 1px solid transparent;

  //TODO: Avoid styling child components like this.
  .ms-Persona {
    background-color: $ms-color-neutralLighter;
    float: left;
    min-height: 30px;
  }
}

// The selected persona may be in an error state.
.ms-PeoplePicker-persona.has-error {
  .ms-Persona-primaryText {
    color: $ms-color-error;
{'fraction_non_alphanumeric': 0.14738865748157642, 'fraction_numerical': 0.013136815123357898, 'mean_word_length': 2.9369482976040353, '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': '6879537', 'n_tokens_mistral': 1072, 'n_tokens_neox': 1014, 'n_words': 287}