.more-popover-menu {
  @extend %more-popover-menu;
}
%more-popover-menu {
  @extend %popover-menu;
}
/* using the inut in the selector here means it won't */
/* take on the default :checked chevron icon */
%more-popover-menu .popover-menu > [type='checkbox'] + label {
  @extend %more-popover-menu-trigger;
}
/* This gives the trigger a slightly larger invisible hit area */
%more-popover-menu-trigger {
  padding: 7px;
}
%more-popover-menu-trigger > * {
  background-color: transparent;
  border-radius: var(--decor-radius-100);
  width: 30px;
  height: 30px;
  font-size: 0;
}
%more-popover-menu-trigger > *::after {
  --icon-name: icon-more-horizontal;
  --icon-color: var(--token-color-foreground-strong);
  --icon-size: icon-300;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
}
%more-popover-menu-trigger > *:active {
  background-color: var(--token-color-surface-strong);
}
%more-popover-menu-trigger > *:hover,
%more-popover-menu-trigger > *:focus {
  background-color: var(--token-color-surface-strong);
}