// ============================================================================
// :: Search target
// ============================================================================
/**
 * General styling added when a target is searched for. It renders <span> inside
 * of the value to highlight the matched word.
 */

// ============================================================================
// :: Root
// ============================================================================
.bp-search-target {
  position: relative;
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-search-target__value {

  /**
   * When an element is being searched for and it detects a part of the word is
   * equal to the keyword, spans are generated to contain that word, we need
   * to highlight that word through the use of this selector
   */
  span {
    font-size: inherit;

    color: $bp-text-color-light;
    background-color: $bp-secondary-color;
    border-radius: 2rem;
    padding: 0.2rem 0.6rem;
  }
}