diff --git a/packages/avatar-group/src/styles/vaadin-avatar-group-base-styles.js b/packages/avatar-group/src/styles/vaadin-avatar-group-base-styles.js
index 3fdce6f0b0c..0e948506790 100644
--- a/packages/avatar-group/src/styles/vaadin-avatar-group-base-styles.js
+++ b/packages/avatar-group/src/styles/vaadin-avatar-group-base-styles.js
@@ -33,10 +33,11 @@ export const avatarGroupStyles = css`
   ::slotted(vaadin-avatar) {
     --_overlap: max(0px, var(--vaadin-avatar-group-overlap, 8px));
     --_gap: max(0px, var(--vaadin-avatar-group-gap, 2px));
-    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M300 0H0V300H300V0ZM150 200C177.614 200 200 177.614 200 150C200 122.386 177.614 100 150 100C122.386 100 100 122.386 100 150C100 177.614 122.386 200 150 200Z" fill="black"/></svg>');
-    mask-size: calc((100% - var(--vaadin-focus-ring-width) * 2) * 3);
-    mask-position: calc(50% + (100% - var(--vaadin-focus-ring-width) * 2 - var(--_overlap)) * var(--_d));
+    --_outline-width: var(--vaadin-focus-ring-width);
     --_d: var(--_dir);
+    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M300 0H0V300H300V0ZM150 200C177.614 200 200 177.614 200 150C200 122.386 177.614 100 150 100C122.386 100 100 122.386 100 150C100 177.614 122.386 200 150 200Z" fill="black"/></svg>');
+    mask-size: calc((100% - var(--_outline-width) * 2) * 3);
+    mask-position: calc(50% + (100% - var(--_outline-width) * 2 - var(--_overlap)) * var(--_d));
   }
 
   :host(:dir(rtl)) ::slotted(vaadin-avatar) {
@@ -44,7 +45,7 @@ export const avatarGroupStyles = css`
   }
 
   ::slotted(vaadin-avatar:not(:first-of-type)) {
-    margin-inline-start: calc((var(--vaadin-focus-ring-width) + var(--_overlap) - var(--_gap)) * -1);
+    margin-inline-start: calc((var(--_outline-width) + var(--_overlap) - var(--_gap)) * -1);
   }
 
   :host(:not([theme~='reverse'])) ::slotted(vaadin-avatar:last-child),
diff --git a/packages/avatar-group/src/vaadin-avatar-group.js b/packages/avatar-group/src/vaadin-avatar-group.js
index 61b5164838e..5e2c6f1668e 100644
--- a/packages/avatar-group/src/vaadin-avatar-group.js
+++ b/packages/avatar-group/src/vaadin-avatar-group.js
@@ -73,6 +73,10 @@ class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(PolylitMix
     return avatarGroupStyles;
   }
 
+  static get lumoInjector() {
+    return { ...super.lumoInjector, includeBaseStyles: true };
+  }
+
   /** @protected */
   render() {
     return html`
diff --git a/packages/avatar-group/test/visual/base/avatar-group.test.js b/packages/avatar-group/test/visual/base/avatar-group.test.js
index 8572fcdc011..90b34982b3f 100644
--- a/packages/avatar-group/test/visual/base/avatar-group.test.js
+++ b/packages/avatar-group/test/visual/base/avatar-group.test.js
@@ -17,6 +17,12 @@ describe('avatar-group', () => {
     await visualDiff(div, 'basic');
   });
 
+  it('reverse', async () => {
+    element.items = [{ name: 'Abc Def' }, { name: 'Ghi Jkl' }, { name: 'Mno Pqr' }, { name: 'Stu Vwx' }];
+    element.setAttribute('theme', 'reverse');
+    await visualDiff(div, 'reverse');
+  });
+
   it('max-items-visible', async () => {
     element.maxItemsVisible = 3;
     element.items = [{ name: 'Abc Def' }, { name: 'Ghi Jkl' }, { name: 'Mno Pqr' }, { name: 'Stu Vwx' }];
diff --git a/packages/avatar-group/test/visual/base/screenshots/avatar-group/baseline/reverse.png b/packages/avatar-group/test/visual/base/screenshots/avatar-group/baseline/reverse.png
new file mode 100644
index 00000000000..f51ab616bcf
Binary files /dev/null and b/packages/avatar-group/test/visual/base/screenshots/avatar-group/baseline/reverse.png differ
diff --git a/packages/avatar-group/test/visual/lumo/avatar-group.test.js b/packages/avatar-group/test/visual/lumo/avatar-group.test.js
index 33a53d7d56d..7c5c8737e3e 100644
--- a/packages/avatar-group/test/visual/lumo/avatar-group.test.js
+++ b/packages/avatar-group/test/visual/lumo/avatar-group.test.js
@@ -20,6 +20,12 @@ describe('avatar-group', () => {
     await visualDiff(div, 'basic');
   });
 
+  it('reverse', async () => {
+    element.items = [{ name: 'Abc Def' }, { name: 'Ghi Jkl' }, { name: 'Mno Pqr' }, { name: 'Stu Vwx' }];
+    element.setAttribute('theme', 'reverse');
+    await visualDiff(div, 'reverse');
+  });
+
   it('max-items-visible', async () => {
     element.maxItemsVisible = 3;
     element.items = [{ name: 'Abc Def' }, { name: 'Ghi Jkl' }, { name: 'Mno Pqr' }, { name: 'Stu Vwx' }];
diff --git a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/avatar-size.png b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/avatar-size.png
index bcdaa8dec17..5f6a3d5fbdc 100644
Binary files a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/avatar-size.png and b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/avatar-size.png differ
diff --git a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/basic.png b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/basic.png
index ccde37c85fc..621e00018a3 100644
Binary files a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/basic.png and b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/basic.png differ
diff --git a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/color-index.png b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/color-index.png
index b88e7d4ff3c..c6155815810 100644
Binary files a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/color-index.png and b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/color-index.png differ
diff --git a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/max-items-visible.png b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/max-items-visible.png
index ea2d40cc6ad..d7dd6d91574 100644
Binary files a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/max-items-visible.png and b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/max-items-visible.png differ
diff --git a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/opened.png b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/opened.png
index e41bd6cf20b..6e6f6070de5 100644
Binary files a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/opened.png and b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/opened.png differ
diff --git a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/reverse.png b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/reverse.png
new file mode 100644
index 00000000000..852bbd6ad09
Binary files /dev/null and b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/reverse.png differ
diff --git a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/theme-large.png b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/theme-large.png
index 8e9292a1c8a..aa7bad53b80 100644
Binary files a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/theme-large.png and b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/theme-large.png differ
diff --git a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/theme-small.png b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/theme-small.png
index 9463e7db6ce..e9eef1c433f 100644
Binary files a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/theme-small.png and b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/theme-small.png differ
diff --git a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/theme-xlarge.png b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/theme-xlarge.png
index aa9b2e3aaee..5eaaca6fcb1 100644
Binary files a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/theme-xlarge.png and b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/theme-xlarge.png differ
diff --git a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/theme-xsmall.png b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/theme-xsmall.png
index 4514e034e74..5cb826fd2c4 100644
Binary files a/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/theme-xsmall.png and b/packages/avatar-group/test/visual/lumo/screenshots/avatar-group/baseline/theme-xsmall.png differ
diff --git a/packages/vaadin-lumo-styles/src/components/avatar-group.css b/packages/vaadin-lumo-styles/src/components/avatar-group.css
index 2e283a57118..75d92eb0aeb 100644
--- a/packages/vaadin-lumo-styles/src/components/avatar-group.css
+++ b/packages/vaadin-lumo-styles/src/components/avatar-group.css
@@ -5,40 +5,20 @@
  */
 @media lumo_components_avatar-group {
   :host {
-    display: block;
-    width: 100%; /* prevent collapsing inside non-stretching column flex */
     --vaadin-avatar-size: var(--lumo-size-m);
     --vaadin-avatar-group-overlap: 8px;
     /* Deprecated property name (overlap-border), for backwards compatibility */
     --vaadin-avatar-group-overlap-border: var(--vaadin-avatar-group-gap, 2px);
   }
 
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  [part='container'] {
-    display: flex;
-    position: relative;
-    width: 100%;
-    flex-wrap: nowrap;
-  }
-
-  ::slotted(vaadin-avatar:not(:first-of-type)) {
-    mask-image: url('data:image/svg+xml;utf8,<svg viewBox=%220 0 300 300%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22><path fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M300 0H0V300H300V0ZM150 200C177.614 200 200 177.614 200 150C200 122.386 177.614 100 150 100C122.386 100 100 122.386 100 150C100 177.614 122.386 200 150 200Z%22 fill=%22black%22/></svg>');
+  ::slotted(vaadin-avatar) {
+    --_gap: var(--vaadin-avatar-group-overlap-border);
+    --_outline-width: var(--vaadin-avatar-outline-width);
     mask-size: calc(300% + var(--vaadin-avatar-group-overlap-border) * 6 - var(--vaadin-avatar-outline-width) * 6);
   }
 
-  ::slotted(vaadin-avatar:not([dir='rtl']):not(:first-of-type)) {
-    margin-left: calc(var(--vaadin-avatar-group-overlap) * -1 - var(--vaadin-avatar-outline-width));
-    mask-position: calc(50% - var(--vaadin-avatar-size) + var(--vaadin-avatar-group-overlap));
-  }
-
-  ::slotted(vaadin-avatar[dir='rtl']:not(:first-of-type)) {
-    margin-right: calc(var(--vaadin-avatar-group-overlap) * -1);
-    mask-position: calc(
-      50% + var(--vaadin-avatar-size) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width)
-    );
+  ::slotted(vaadin-avatar:not(:first-of-type)) {
+    margin-inline-start: calc(var(--_overlap) * -1 - var(--vaadin-avatar-outline-width));
   }
 
   :host([theme~='xlarge']) {