/* Darstellung gespeicherter Erwähnungen in Nodes, Kommentaren und Treffern. */
.mention {
  padding: .08em .28em;
  color: #805d18;
  font-weight: 650;
  white-space: nowrap;
  background: #fff4d8;
  border-radius: 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.mention.confidence-mention--interactive {
  cursor: help;
  transition: color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.mention.confidence-mention--interactive:hover,
.mention.confidence-mention--interactive:focus-visible {
  color: #68480f;
  background: #ffe9ad;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(176, 125, 31, .18);
}

.confidence-mention-popover {
  --mention-arrow-left: 50%;
  position: fixed;
  z-index: 450;
  display: flex;
  box-sizing: border-box;
  width: min(19rem, calc(100vw - 1rem));
  min-height: 74px;
  align-items: center;
  gap: .8rem;
  padding: .8rem;
  color: var(--confidence-stone-950, #1c1917);
  background: #fff;
  border: 1px solid var(--confidence-stone-200, #e7e5e4);
  border-radius: 11px;
  box-shadow: 0 16px 42px -18px rgba(28, 25, 23, .5), 0 3px 10px rgba(28, 25, 23, .08);
}

.confidence-mention-popover[hidden] {
  display: none;
}

.confidence-mention-popover::before,
.confidence-mention-popover::after {
  position: absolute;
  left: var(--mention-arrow-left);
  width: 0;
  height: 0;
  content: '';
  transform: translateX(-50%);
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
}

.confidence-mention-popover::before {
  top: 100%;
  border-top: 7px solid var(--confidence-stone-200, #e7e5e4);
}

.confidence-mention-popover::after {
  top: calc(100% - 1px);
  border-top: 7px solid #fff;
}

.confidence-mention-popover--below::before,
.confidence-mention-popover--below::after {
  top: auto;
  border-top: 0;
  border-bottom: 7px solid;
}

.confidence-mention-popover--below::before {
  bottom: 100%;
  border-bottom-color: var(--confidence-stone-200, #e7e5e4);
}

.confidence-mention-popover--below::after {
  bottom: calc(100% - 1px);
  border-bottom-color: #fff;
}

.confidence-mention-popover__avatar,
.confidence-mention-popover__initials {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  object-fit: cover;
  overflow: hidden;
  color: #805d18;
  font-size: .9rem;
  font-weight: 750;
  letter-spacing: .03em;
  background: #fff4d8;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--confidence-stone-200, #e7e5e4);
}

.confidence-mention-popover__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .18rem;
}

.confidence-mention-popover__eyebrow {
  color: var(--confidence-gold, #9a6b18);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.confidence-mention-popover__name {
  overflow: hidden;
  color: var(--confidence-stone-950, #1c1917);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confidence-mention-popover__position,
.confidence-mention-popover__count,
.confidence-mention-popover__status {
  overflow: hidden;
  color: var(--confidence-stone-600, #57534e);
  font-size: .79rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confidence-mention-popover__count {
  color: #006f6e;
  font-weight: 650;
}

.confidence-mention-popover__status {
  color: var(--confidence-stone-500, #78716c);
}

@media (prefers-reduced-motion: reduce) {
  .mention.confidence-mention--interactive {
    transition: none;
  }
}