.GlossaryItem {
  &-trigger {
    border-bottom: 1px solid #737c83;
    border-style: dotted;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
  }

  &-tooltip-content {
    --Glossary-bg: var(--color-bg-page, var(--white));
    --Glossary-color: var(--color-text-default, var(--gray20));
    --Glossary-shadow: var(
      --box-shadow-menu-light,
      0 5px 10px rgba(0, 0, 0, 0.05),
      0 2px 6px rgba(0, 0, 0, 0.025),
      0 1px 3px rgba(0, 0, 0, 0.025)
    );

    /* what the dark-mode mixin does in the readme project */
    [data-color-mode='dark'] & {
      --Glossary-bg: var(--gray15);
      --Glossary-color: var(--color-text-default, var(--white));
      --Glossary-shadow: var(
        --box-shadow-menu-dark,
        0 1px 3px rgba(0, 0, 0, 0.025),
        0 2px 6px rgba(0, 0, 0, 0.025),
        0 5px 10px rgba(0, 0, 0, 0.05)
      );
    }

    @media (prefers-color-scheme: dark) {
      [data-color-mode='auto'] & {
        --Glossary-bg: var(--Tooltip-bg, var(--gray0));
        --Glossary-color: var(--color-text-default, var(--white));
        --Glossary-shadow: var(
          --box-shadow-menu-dark,
          0 1px 3px rgba(0, 0, 0, 0.025),
          0 2px 6px rgba(0, 0, 0, 0.025),
          0 5px 10px rgba(0, 0, 0, 0.05)
        );
      }
    }

    background-color: var(--Glossary-bg);
    border: 1px solid #{var(--color-border-default, rgba(black, 0.1))};
    border-radius: var(--border-radius);
    box-shadow: var(--Glossary-shadow);
    color: var(--Glossary-color);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    padding: 15px;
    text-align: left;
    max-width: min(350px, calc(100vw - 20px));
  }

  &-term {
    font-style: italic;
  }
}

.tippy-box {
  // needed for tippy's default animation
  &[data-animation='fade'][data-state='hidden'] {
    opacity: 0;
  }
}