How to remove padding-inline-start of v-list-item

[andre-menezes]

Here is my component:

<v-list-item-group>
    <template v-for="menu in navItems" :key="menu.title">
        <v-list-item v-if="!menu.subMenus" :to="menu.path" class="text-primary"></v-list-item>
        <v-list-group v-else :value="menu.title">
            <template v-slot:activator="{ props }">
                <v-list-item v-bind="props" :prepend-icon="menu.icon" class="text-primary">
                    {{ menu.title }}
                </v-list-item>
            </template>
            <v-list-item v-for="subMenu in menu.subMenus" :prepend-icon="subMenu.icon" :to="subMenu.path">
                {{ subMenu.title }}
            </v-list-item>
        </v-list-group>
    </template>
<v-list-item-group>

When rendering the menu, the subMenu items have a padding-inline-start of 64px, defined by the following CSS class:

.v-list-group__items .v-list-item {
    padding-inline-start: calc(16px + var(--indent-padding)) !important;
}

I would like to remove the padding-inline-start, but I'm not able to. I've already tried overriding the class v-list-group__items .v-list-item, but it didn't work.

[konstantin-karlovich-unbiased-co-uk]

@andre-menezes

.v-list {
  --indent-padding: -16px;
}