.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: var(--transparent);
  border-radius: var(--decor-radius-100);
  width: 30px;
  height: 30px;
  font-size: 0;
}
%more-popover-menu-trigger > *::after {
  @extend %with-more-horizontal-mask, %as-pseudo;
  background-color: rgb(var(--tone-gray-900));
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
}
%more-popover-menu-trigger > *:active {
  background-color: rgb(var(--tone-gray-100));
}
%more-popover-menu-trigger > *:hover,
%more-popover-menu-trigger > *:focus {
  background-color: rgb(var(--tone-gray-050));
}