chromium/ash/webui/common/resources/cr_elements/search_highlight_style.css

/* Copyright 2022 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=style
 * #scheme=relative
 * #import=./cr_shared_vars.css.js
 * #css_wrapper_metadata_end */

.search-bubble {
  --search-bubble-color: #ffeb3b;  /* --paper-yellow-500 */
  position: absolute;
  z-index: 1;
}

.search-bubble-innards {
  align-items: center;
  background-color: var(--search-bubble-color);
  border-radius: 2px;
  color: var(--google-grey-900);
  max-width: 100px;
  min-width: 64px;
  overflow: hidden;
  padding: 4px 10px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Provides the arrow which points at the anchor element. */
.search-bubble-innards::after {
  background-color: var(--search-bubble-color);
  content: '';
  height: 10px;
  left: calc(50% - 5px);
  position: absolute;
  top: -5px;
  transform: rotate(-45deg);
  width: 10px;
  z-index: -1;
}

/* Turns the arrow direction downwards, when the bubble is placed above
 * the anchor element */
.search-bubble-innards.above::after {
  bottom: -5px;
  top: auto;
  transform: rotate(-135deg);
}