.popover {
  background-color: var(--color-bg);
  border-radius: var(--rounded-md);
  border-width: var(--border);
  border: var(--border) solid var(--color-border);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  inline-size: var(--popover-size, max-content);
  inset: auto;
  margin: 0;
  position: fixed;
  z-index: 20;

  /* Final state of exit animation and setup */
  opacity: 0;
  transform: var(--scale-95);
  transition-behavior: allow-discrete;
  transition-duration: var(--time-150);
  transition-property: display, overlay, opacity, transform;

  display: none;

  &.light {
    background-color: white;
  }

  /* Final state of entry animation */
  &:popover-open {
    display: initial;
    opacity: 1; transform: var(--scale-100);
  }

  &.is-open {
    display: initial;
    opacity: 1;
    transform: var(--scale-100);
  }

  /* Initial state of entry animation */
  @starting-style {
    &:popover-open {
      opacity: 0; transform: var(--scale-95);
    }
  }

  /* to remove once bootstrap is gone */
  --bs-popover-font-size: 1rem;
  max-width: unset;
}

.popover--guide {
  inline-size: min(30rem, calc(100vw - 2rem));
  max-block-size: min(26rem, calc(100vh - 2rem));
  overflow-y: auto;
  padding: var(--size-4);

  &:popover-open,
  &.is-open {
    display: block;
  }
}

.popover__title {
  font-size: 1rem;
  font-weight: var(--font-semibold);
  margin-block: 0 var(--size-2);
}

.popover__definitions {
  margin: 0;
}

.popover__definitions > div {
  border-block-start: 1px solid var(--color-border);
  display: grid;
  gap: var(--size-1);
  padding-block: var(--size-2);
}

.popover__definitions dt {
  font-weight: var(--font-semibold);
}

.popover__definitions dd {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  margin: 0;
}