/* SPDX-License-Identifier: MIT
 *
 * info-icon.css - the info affordance (templates/components/info_icon.html): hire4real's
 * tint-card__info, as a native <details>. A muted glyph, present for the reader who wants the
 * basis; the panel is the one floating component (tooltip.css). Secondary ink at full opacity:
 * quiet, and still over AA (hire4real measured its first cut at 3.78:1 and raised it).
 */

.info-icon { display: inline-block; }
.info-icon__button {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  margin-left: -4px;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.15s ease;
}
.info-icon__button::-webkit-details-marker { display: none; }
.info-icon__button::marker { content: ""; }
.info-icon__button:hover,
.info-icon[open] > .info-icon__button { color: var(--ink); }
.info-icon__button:focus-visible { outline: 2px solid var(--earth); outline-offset: 2px; }