/* Shared tooltip.
   One popup element lives in the page (see components/tooltip_host.html) and is
   reused by every trigger, so adding a trigger costs no extra markup.
   Positioning happens in tooltip.js because the popup is position: fixed and has
   to be clamped to the viewport; CSS cannot know where its trigger sits. */

.tooltip-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Sized and offset in em so the trigger tracks whatever label it annotates.
     Those labels run from 0.68rem to 1rem across the app. -0.25em lands the
     icon on the cap-height centre of the text rather than the x-height centre
     `middle` would use, which is what all-caps labels like SDE read against.
     The margin looks tight because the glyph fills only part of its box and
     brings spacing of its own. */
  margin-left: 0.1em;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  vertical-align: -0.25em;
}

/* The drawn circle covers a little over half its box, so the box has to run
   past the cap height for the icon to look the same size as the label. */
.tooltip-trigger svg {
  width: 1.2em;
  height: 1.2em;
}

/* Next to an 11px label the icon is a 13px target, well under the 24px
   minimum a finger needs. This widens what a tap has to land on without
   changing anything the layout can see. */
.tooltip-trigger::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

/* The icon should read as part of the label it annotates, not as a second
   piece of content competing with it, so the label keeps the visual weight. */
.tooltip-trigger svg {
  opacity: 0.6;
}

/* components.css forces its own color onto every icon inside an anchor via a
   blanket `a svg:not(.icon-button)` rule, which a single-class selector cannot
   outrank. Repeating the class wins on specificity so a trigger placed inside a
   link still takes the color of the label it sits next to. */
.tooltip-trigger.tooltip-trigger svg {
  color: inherit;
}

.tooltip-trigger:hover svg,
.tooltip-trigger.is-active svg {
  opacity: 1;
}

.tooltip-trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 50%;
}

/* Both selectors so the popover UA styles are overridden in either state:
   they would otherwise stretch the popup across the viewport (inset: 0) and
   give it a border and its own background. `display` stays block in both
   states as well, which keeps the fade working; visibility does the hiding.
   The z-index only matters where showPopover is unavailable, and clears the
   responsive modal at 1101. */
.tooltip,
.tooltip:popover-open {
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  z-index: 1102;
  display: block;
  width: min(80vw, 20rem);
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background-color: var(--tooltip-bg);
  /* drop-shadow rather than box-shadow: the arrow is a separate element sitting
     outside the popup's box, and only a filter follows the whole silhouette.
     A box-shadow would leave the arrow flat against what it points at. */
  filter: var(--tooltip-shadow);
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.1s;
}

.tooltip.is-open {
  opacity: 1;
  visibility: visible;
}

.tooltip__text {
  font-size: 12px;
  line-height: 1.45;
  color: var(--tooltip-fg);
  white-space: normal;
  word-break: break-word;
}

/* `left` is set from tooltip.js so the arrow keeps pointing at its trigger even
   after the popup has been clamped to the viewport. The value here is the
   fallback for the moment before the first positioning pass. */
.tooltip__arrow {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 20px;
  height: 20px;
  border-top-left-radius: 6px;
  background-color: var(--tooltip-bg);
  transform: translateX(-50%) rotate(45deg);
}

/* Flipped above its trigger when there is no room below. */
.tooltip--above .tooltip__arrow {
  top: auto;
  bottom: -10px;
  border-top-left-radius: 0;
  border-bottom-right-radius: 6px;
}

@media (min-width: 450px) {
  .tooltip {
    width: 240px;
  }
}