Icons targeting subfolders only

[JRM_Rei]

Hi everyone— After following this post to customize my folders, I’m currently trying to make it a little bit more advanced, specifically targeting subfolders only. I want to be able to add any icon I’d like to the main folders, using data-path=" … " content, while keeping the rest of the code working for the subfolders.

Example:
VAULT
---- Main Folder
-------- Subfolder
-------------- Note
-------------- Note
-------- Subfolder2
-------------- Note
-------------- Note
---- Main Folder
-------- Subfolder
-------------- Note

What has been working so far is what you can see below, although I’ve been unable to add a “children-children kind of class” that only targets subfolders, meaning that my main folders also have the same icon.

/* Folders */

.nav-folder:not(.mod-root) .nav-folder-title-content::before {
	display: inline-block;
	content: "";
	margin-right: 4px;
	vertical-align: text-bottom;
	height: 16px;
	width: 17px;
  background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
}

/* Folders open*/

.nav-folder:not(.mod-root):not(.is-collapsed) .nav-folder-title-content::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24' fill='none' stroke='currentColor' stroke-linejoin='round' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M6 14l1.45-2.9A2 2 0 0 1 9.24 10H22a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E%0A");
}

/* Folders closed*/

.nav-folder:not(.mod-root).is-collapsed .nav-folder-title-content::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24' fill='none' stroke='currentColor' stroke-linejoin='round' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2z'/%3E%3Cpath d='M2 10h20' /%3E%3C/svg%3E%0A");
}

/* Files */

.nav-folder-children .nav-file-title-content:first-child::before {
	background-color: currentColor;
	content: "";
	display: inline-flex;
	flex-shrink: 0;
	height: 16px;
	width: 16px;
	margin-right: 4px;
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpath d='M14 2v6h6m-4 5H8m8 4H8m2-8H8'/%3E%3C/svg%3E%0A")
}

I know that there are plugins like Iconize that I could use to manually do the job, but I’d like it to be fully automated, with the exception of the main folders.
Do you have any suggestion? TIA