.action-menu {
  @include e(trigger) {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }

  @include e(trigger-icon) {
    --action-menu-trigger-icon-size: #{calc-rem(16px)};
    --action-menu-trigger-icon-color: var(--color-gray-400);
    --action-menu-trigger-icon-color-hover: var(--color-brand-dark);

    width: var(--action-menu-trigger-icon-size);
    height: var(--action-menu-trigger-icon-size);
    font-size: var(--action-menu-trigger-icon-size);
    line-height: var(--action-menu-trigger-icon-size);
    color: var(--action-menu-trigger-icon-color);
  }
}

.action-menu-item {
  --action-menu-item-color: var(--color-gray-700);
  --action-menu-item-icon-size: #{calc-rem(16px)};
  --action-menu-item-icon-gap: #{calc-rem(8px)};

  display: flex;
  align-items: center;
  color: var(--action-menu-item-color);

  @include m(destructive) {
    --action-menu-item-color: var(--color-error);
  }

  @include e(icon) {
    flex: none;

    margin-right: var(--action-menu-item-icon-gap);
    width: var(--action-menu-item-icon-size);
    height: var(--action-menu-item-icon-size);
    font-size: var(--action-menu-item-icon-size);
    line-height: var(--action-menu-item-icon-size);
    color: inherit;
  }

  @include e(label) {
    @include fontSize($font-size-md);
  }
}