.lexicon-hint {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  position: relative;
}

.lexicon-hint--icon-only { margin-left: 0.25rem; }

.lexicon-hint__trigger {
  color: var(--bs-secondary-color, #6c757d);
  cursor: help;
  font-size: 0.8em;
  line-height: 1;
}

.lexicon-hint__trigger:hover,
.lexicon-hint__trigger:focus-visible { color: var(--bs-primary, #0d6efd); }

.lexicon-hint__bubble {
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
  color: var(--bs-body-color, #212529);
  display: none;
  font-size: 0.8125rem;
  font-weight: 400;
  left: 0;
  line-height: 1.4;
  padding: 0.5rem 0.75rem;
  position: absolute;
  text-align: left;
  text-transform: none;
  top: calc(100% + 0.25rem);
  white-space: normal;
  width: max-content;
  max-width: min(22rem, 80vw);
  z-index: 1080;
}

.lexicon-hint__trigger:hover + .lexicon-hint__bubble,
.lexicon-hint__trigger:focus-visible + .lexicon-hint__bubble { display: block; }

.datagrid thead th { white-space: nowrap; }

.datagrid thead th:has(> .lexicon-hint) > a,
.datagrid thead th:has(> .lexicon-hint) > span:not(.lexicon-hint) {
  display: inline-block;
  padding-inline-end: 0;
}

.datagrid thead .lexicon-hint span:not(.icon, .lexicon-hint__bubble) {
  display: inline;
  font-weight: 400;
  padding: 0;
}

.datagrid thead .lexicon-hint .lexicon-hint__bubble {
  display: none;
  white-space: normal;
}

.datagrid thead .lexicon-hint__trigger:hover + .lexicon-hint__bubble,
.datagrid thead .lexicon-hint__trigger:focus-visible + .lexicon-hint__bubble { display: block; }