@use 'variables.scss' as var;

.ft-definition {
  font-size: 0.75em;
  margin-top: 0.8em;
  scroll-margin-top: var.$menu-bar-height;

  a {
    text-decoration: none;
  }

  p {
    display: inline;
  }
}

.ft-reference {
  button {
    text-decoration: none;
    scroll-margin-top: var.$menu-bar-height;

    background: none;
    border: none;
    color: var(--links);
    cursor: pointer;
    padding: 0;
    font: inherit;
  }
}

.ft-pop {
  position: absolute;
  left: 0;
  right: 0;
  width: 84dvw;
  margin-left: auto;
  margin-right: auto;

  color: var(--fg);
  background-color: var(--theme-popup-bg);
  border: 0.1rem solid var(--theme-popup-border);

  max-height: 64dvh;
  padding: 1rem 1rem;
  border-radius: .8rem;
  font-size: .64rem;
  text-align: left;
  overflow-y: scroll;

  transform: scale(0.95);
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;

  &.show {
    opacity: 1;
    transform: scale(1);
    z-index: 100;
  }

  a {
    text-decoration: none;

    &:link,
    &:visited {
      color: var(--links);
      margin-left: .2em;
      margin-right: .2em;
    }
  }

  p {
    display: inline;
  }
}
