.handheld__toggle {
  --icon-size: var(--handheld-toggle-text, 2rem);

  anchor-name: --handheld-toggle;

  width: var(--handheld-toggle-size, 64px);
  height: var(--handheld-toggle-size, 64px);
  cursor: pointer;
  display: grid;
  place-items: center;
  background-color: var(--handheld-toggle-bg, transparent);

  &:active {
    background-color: var(--handheld-toggle-bg-hover, transparent);
  }

  @media (hover: hover) {
    &:hover {
      background-color: var(--handheld-toggle-bg-hover, transparent);
    }
  }

  :has(:popover-open) & {
    background-color: var(--handheld-toggle-bg-hover, transparent);
  }
}

.handheld__popover {
  position-anchor: --handheld-toggle;
  position-area: bottom span-left;

  width: 100%;
}


.handheld {
  display: flex;
  justify-content: flex-end;
}

.handheld:has(:popover-open) .handheld__toggle-open,
.handheld:not(:has(:popover-open)) .handheld__toggle-close {
  display: none;
}

.wrapper .handheld__popover {
  width: calc(100% + var(--wrapper-p, 1rem));
  margin-inline: calc(var(--wrapper-p, 1rem) * -1);
}
