.term {
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  color: var(--ifm-color-primary);
  border-bottom: 1px dotted var(--ifm-color-primary);
}

.infoIcon {
  color: var(--ifm-color-primary);
  opacity: 0.7;
  margin-left: 0.125rem;
}

.notFound {
  color: var(--ifm-color-danger);
}

.popover {
  background-color: var(--ifm-card-background-color);
  color: var(--ifm-font-color-base);
  border: 1px solid var(--ifm-color-emphasis-200);
  border-radius: 0.375rem;
  padding: 0.75rem;
  max-width: 25rem;
  z-index: 1000;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

.popoverTitle {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--ifm-color-primary);
  font-weight: 600;
}

.popoverContent {
  line-height: 1.5;
}

@media (max-width: 768px) {
  .popover {
    /* !important needed to override Floating UI's inline positioning styles */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    max-width: 100%;
    max-height: 80vh;
    border-radius: 1rem 1rem 0 0;
    overflow-y: auto;
  }

  .popover::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.25rem;
    height: 0.25rem;
    background-color: var(--ifm-color-emphasis-300);
    border-radius: 0.125rem;
  }
}
