@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/styles/03-generic/_generic.root.scss

@@ -0,0 +1,184 @@
+@use '../02-tools' as *;
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.color-mode' as color-mode;
+@use '../01-settings/settings.border-radius' as border-radius;
+@use '../01-settings/settings.border' as border;
+@use '../01-settings/settings.colors' as colors;
+@use '../01-settings/settings.maps' as color-maps;
+@use '../01-settings/settings.box-shadow' as box-shadow;
+@use '../01-settings/settings.typography' as typography;
+@use 'sass:meta';
+
+$gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !default;
+
+:root,
+[data-#{config.$prefix}theme='light'] {
+  // Note: Custom variable values only support SassScript inside `#{}`.
+
+  // Colors
+  //
+  // Generate palettes for full colors, grays, and theme colors.
+
+  @each $color, $value in color-maps.$theme-colors {
+    --#{config.$prefix}#{$color}: #{$value};
+  }
+
+  $theme-colors-rgb: map-loop(color-maps.$theme-colors, to-rgb) !default;
+
+  @each $color, $value in color-maps.$theme-colors {
+    --#{config.$prefix}#{$color}-rgb: #{to-rgb($value)};
+  }
+
+  @each $color, $value in color-maps.$grays {
+    --#{config.$prefix}gray-#{$color}: #{$value};
+  }
+
+  @each $color, $value in color-maps.$theme-colors-text {
+    --#{config.$prefix}#{$color}-text-emphasis: #{$value};
+  }
+
+  @each $color, $value in color-maps.$theme-colors-bg-subtle {
+    --#{config.$prefix}#{$color}-bg-subtle: #{$value};
+  }
+
+  @each $color, $value in color-maps.$theme-colors-border-subtle {
+    --#{config.$prefix}#{$color}-border-subtle: #{$value};
+  }
+
+  @each $color, $value in color-maps.$theme-colors-hover {
+    --#{config.$prefix}#{$color}-hover: #{$value};
+  }
+
+  // Fonts
+
+  // Note: Use meta.inspect for lists so that quoted items keep the quotes.
+  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
+  --#{config.$prefix}font-sans-serif: #{meta.inspect(typography.$font-family-sans-serif)};
+  --#{config.$prefix}font-monospace: #{meta.inspect(typography.$font-family-monospace)};
+  --#{config.$prefix}gradient: #{$gradient};
+
+  // Root and body
+  // scss-docs-start root-body-variables
+  @if typography.$font-size-root != null {
+    --#{config.$prefix}root-font-size: #{typography.$font-size-root};
+  }
+  --#{config.$prefix}body-font-family: #{meta.inspect(typography.$font-family-base)};
+  --#{config.$prefix}body-font-size: #{typography.$font-size-base};
+  --#{config.$prefix}body-font-weight: #{typography.$font-weight-base};
+  --#{config.$prefix}body-line-height: #{typography.$line-height-base};
+  @if typography.$body-text-align != null {
+    --#{config.$prefix}body-text-align: #{typography.$body-text-align};
+  }
+
+  --#{config.$prefix}body-color: #{colors.$body-color};
+  --#{config.$prefix}body-bg: #{colors.$body-bg};
+
+  // scss-docs-end root-body-variables
+
+  --#{config.$prefix}heading-color: #{colors.$headings-color};
+
+  --#{config.$prefix}link-color: #{colors.$link-color};
+  --#{config.$prefix}link-color-rgb: #{to-rgb(colors.$link-color)};
+  --#{config.$prefix}link-decoration: #{colors.$link-decoration};
+
+  --#{config.$prefix}link-hover-color: #{colors.$link-hover-color};
+  --#{config.$prefix}link-hover-color-rgb: #{to-rgb(colors.$link-hover-color)};
+
+  @if colors.$link-hover-decoration != null {
+    --#{config.$prefix}link-hover-decoration: #{colors.$link-hover-decoration};
+  }
+
+  --#{config.$prefix}code-color: #{colors.$code-color};
+  --#{config.$prefix}highlight-bg: #{colors.$mark-bg};
+
+  // scss-docs-start root-border-var
+  --#{config.$prefix}border-width: #{border.$border-width};
+  --#{config.$prefix}border-style: #{border.$border-style};
+  --#{config.$prefix}border-color: #{border.$border-color};
+  --#{config.$prefix}border-color-translucent: rgba(#{to-rgb(border.$border-color)}, 0.175);
+
+  --#{config.$prefix}border-radius: #{border-radius.$border-radius};
+  --#{config.$prefix}border-radius-sm: #{border-radius.$border-radius-sm};
+  --#{config.$prefix}border-radius-lg: #{border-radius.$border-radius-lg};
+  --#{config.$prefix}border-radius-xl: #{border-radius.$border-radius-xl};
+  --#{config.$prefix}border-radius-xxl: #{border-radius.$border-radius-xxl};
+  --#{config.$prefix}border-radius-2xl: var(
+    --#{config.$prefix}border-radius-xxl
+  ); // Deprecated in v5.3.0 for consistency
+  --#{config.$prefix}border-radius-3xl: #{border-radius.$border-radius-3xl};
+  --#{config.$prefix}border-radius-4xl: #{border-radius.$border-radius-4xl};
+  --#{config.$prefix}border-radius-pill: #{border-radius.$border-radius-pill};
+  // scss-docs-end root-border-var
+
+  --#{config.$prefix}box-shadow: #{box-shadow.$box-shadow};
+  --#{config.$prefix}box-shadow-xs: #{box-shadow.$box-shadow-xs};
+  --#{config.$prefix}box-shadow-sm: #{box-shadow.$box-shadow-sm};
+  --#{config.$prefix}box-shadow-lg: #{box-shadow.$box-shadow-lg};
+  --#{config.$prefix}box-shadow-xl: #{box-shadow.$box-shadow-xl};
+  --#{config.$prefix}box-shadow-inset: #{box-shadow.$box-shadow-inset};
+
+  // Focus styles
+  // scss-docs-start root-focus-variables
+  --#{config.$prefix}focus-border-color: #{colors.$focus-border-color};
+  // scss-docs-end root-focus-variables
+
+  // scss-docs-start root-form-validation-variables
+  --#{config.$prefix}form-valid-color: #{colors.$form-valid-color};
+  --#{config.$prefix}form-valid-border-color: #{colors.$form-valid-border-color};
+  --#{config.$prefix}form-invalid-color: #{colors.$form-invalid-color};
+  --#{config.$prefix}form-invalid-border-color: #{colors.$form-invalid-border-color};
+  // scss-docs-end root-form-validation-variables
+}
+
+@if color-mode.$enable-dark-mode {
+  @include color-mode(dark, true) {
+    color-scheme: dark;
+
+    --#{config.$prefix}body-color: #{colors.$body-color-dark};
+    --#{config.$prefix}body-bg: #{colors.$body-bg-dark};
+
+    @each $color, $value in color-maps.$theme-colors-dark {
+      --#{config.$prefix}#{$color}: #{$value};
+    }
+
+    @each $color, $value in color-maps.$theme-colors-text-dark {
+      --#{config.$prefix}#{$color}-text-emphasis: #{$value};
+    }
+
+    @each $color, $value in color-maps.$theme-colors-bg-subtle-dark {
+      --#{config.$prefix}#{$color}-bg-subtle: #{$value};
+    }
+
+    @each $color, $value in color-maps.$theme-colors-border-subtle-dark {
+      --#{config.$prefix}#{$color}-border-subtle: #{$value};
+    }
+
+    @each $color, $value in color-maps.$theme-colors-hover-dark {
+      --#{config.$prefix}#{$color}-hover: #{$value};
+    }
+
+    --#{config.$prefix}box-shadow: #{box-shadow.$box-shadow-dark};
+    --#{config.$prefix}box-shadow-xs: #{box-shadow.$box-shadow-xs-dark};
+    --#{config.$prefix}box-shadow-sm: #{box-shadow.$box-shadow-sm-dark};
+    --#{config.$prefix}box-shadow-lg: #{box-shadow.$box-shadow-lg-dark};
+    --#{config.$prefix}box-shadow-xl: #{box-shadow.$box-shadow-xl-dark};
+
+    --#{config.$prefix}heading-color: #{colors.$headings-color-dark};
+
+    --#{config.$prefix}link-color: #{colors.$link-color-dark};
+    --#{config.$prefix}link-color-rgb: #{to-rgb(colors.$link-color-dark)};
+    --#{config.$prefix}link-hover-color: #{colors.$link-hover-color-dark};
+
+    --#{config.$prefix}code-color: #{colors.$code-color-dark};
+
+    --#{config.$prefix}border-color: #{border.$border-color-dark};
+    --#{config.$prefix}border-color-translucent: #{colors.$border-color-translucent-dark};
+
+    --#{config.$prefix}focus-border-color: #{colors.$focus-border-color-dark};
+
+    --#{config.$prefix}form-valid-color: #{colors.$form-valid-color-dark};
+    --#{config.$prefix}form-valid-border-color: #{colors.$form-valid-border-color-dark};
+    --#{config.$prefix}form-invalid-color: #{colors.$form-invalid-color-dark};
+    --#{config.$prefix}form-invalid-border-color: #{colors.$form-invalid-border-color-dark};
+  }
+}

package/src/styles/03-generic/_generic.selection.scss

@@ -0,0 +1,15 @@
+@use '../01-settings/settings.colors' as colors;
+
+::selection {
+  background: colors.$primary;
+  background: rgba(colors.$primary, 0.3);
+}
+
+::-moz-selection {
+  background: colors.$primary;
+  background: rgba(colors.$primary, 0.3);
+}
+
+* {
+  -webkit-tap-highlight-color: rgba(colors.$primary, 0.2);
+}

package/src/styles/03-generic/_index.scss

@@ -0,0 +1,5 @@
+// Forward all generic files
+@forward 'generic.reset';
+@forward 'generic.root';
+@forward 'generic.selection';
+@forward 'generic.fonts';

package/src/styles/04-elements/_elements.all.scss

@@ -0,0 +1,16 @@
+@use '../01-settings/settings.config' as config;
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+.docs-story {
+  background: var(--#{config.$prefix}body-bg) !important;
+}

package/src/styles/04-elements/_elements.body.scss

@@ -0,0 +1,15 @@
+@use '../01-settings/settings.typography' as typography;
+
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: typography.$font-family-base;
+  font-weight: typography.$font-weight-base;
+  font-size: typography.$font-size-base;
+  line-height: typography.$line-height-base;
+
+  &.is-blocked,
+  &.is-modal-open {
+    overflow: hidden;
+  }
+}

package/src/styles/04-elements/_elements.heading.scss

@@ -0,0 +1,54 @@
+@use '../01-settings/settings.typography' as typography;
+
+h1,
+.h1 {
+  font-size: typography.$h1-font-size;
+  letter-spacing: typography.$h1-letter-spaceing;
+}
+
+h2,
+.h2 {
+  font-size: typography.$h2-font-size;
+  letter-spacing: typography.$h2-letter-spaceing;
+}
+
+h3,
+.h3 {
+  font-size: typography.$h3-font-size;
+  letter-spacing: typography.$h3-letter-spaceing;
+}
+
+h4,
+.h4 {
+  font-size: typography.$h4-font-size;
+  letter-spacing: typography.$h4-letter-spaceing;
+}
+
+h5,
+.h5 {
+  font-size: typography.$h5-font-size;
+  letter-spacing: typography.$h5-letter-spaceing;
+}
+
+h6,
+.h6 {
+  font-size: typography.$h6-font-size;
+  letter-spacing: typography.$h6-letter-spaceing;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-family: typography.$headings-font-family;
+  font-weight: typography.$headings-font-weight;
+  line-height: typography.$headings-line-height;
+}

package/src/styles/04-elements/_elements.html.scss

@@ -0,0 +1,9 @@
+html {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}

package/src/styles/04-elements/_elements.links.scss

@@ -0,0 +1,11 @@
+@use '../01-settings/settings.config' as config;
+@use '../02-tools/tools.animations' as animations;
+
+a {
+  color: rgba(var(--#{config.$prefix}link-color-rgb), var(--#{config.$prefix}u-link-opacity, 1));
+  @include animations.basic-transition(color);
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+}

package/src/styles/04-elements/_index.scss

@@ -0,0 +1,6 @@
+// Forward all elements files
+@forward 'elements.all';
+@forward 'elements.body';
+@forward 'elements.heading';
+@forward 'elements.html';
+@forward 'elements.links';

package/src/styles/05-objects/_index.scss

@@ -0,0 +1,4 @@
+// Forward all objects files
+@forward 'objects.container';
+@forward 'objects.grid';
+@forward 'objects.masonry-grid';

package/src/styles/05-objects/_objects.container.scss

@@ -0,0 +1,36 @@
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.grid' as grid;
+@use '../01-settings/settings.breakpoints' as breakpoints;
+@use '../02-tools/tools.breakpoints' as *;
+@use '../02-tools/tools.grid' as *;
+
+.o-container,
+.o-container-fluid {
+  @include make-container();
+}
+
+@each $breakpoint, $container-max-width in grid.$container-max-widths {
+  .o-container-#{$breakpoint} {
+    @extend .o-container-fluid;
+  }
+
+  @include media-breakpoint-up($breakpoint, breakpoints.$grid-breakpoints) {
+    %responsive-container-#{$breakpoint} {
+      max-width: $container-max-width;
+    }
+
+    $extend-breakpoint: true;
+
+    @each $name, $width in breakpoints.$grid-breakpoints {
+      @if ($extend-breakpoint) {
+        .o-container#{breakpoint-infix($name, breakpoints.$grid-breakpoints)} {
+          @extend %responsive-container-#{$breakpoint};
+        }
+
+        @if ($breakpoint == $name) {
+          $extend-breakpoint: false;
+        }
+      }
+    }
+  }
+}

package/src/styles/05-objects/_objects.grid.scss

@@ -0,0 +1,25 @@
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.grid' as grid;
+@use '../02-tools/tools.grid' as *;
+@use '../02-tools/tools.breakpoints' as *;
+
+.o-grid {
+  --#{config.$prefix}gutter-y: #{grid.$grid-gutter-width};
+  @include make-row();
+
+  &__col {
+    @include make-col-ready();
+  }
+
+  &--no-gutters {
+    margin-right: 0;
+    margin-left: 0;
+
+    .o-grid__col {
+      padding-right: 0;
+      padding-left: 0;
+    }
+  }
+}
+
+@include grid-columns();

package/src/styles/05-objects/_objects.masonry-grid.scss

@@ -0,0 +1,96 @@
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.masonry-grid' as masonry;
+@use '../01-settings/settings.breakpoints' as breakpoints;
+@use '../02-tools/tools.rem' as *;
+@use 'sass:math';
+
+.o-masonry-grid {
+  $root: &;
+
+  // Base styles
+  position: relative;
+  width: 100%;
+  min-height: 100px; // Minimum height to prevent layout shift
+
+  // Animation variant
+  &--animate {
+    .o-masonry-grid__item {
+      transition:
+        opacity 0.3s ease,
+        top 0.3s ease,
+        left 0.3s ease;
+    }
+  }
+
+  // Item styles
+  &__item {
+    box-sizing: border-box;
+    width: 100%;
+
+    // Prevent FOUC (Flash of Unstyled Content)
+    &:not([style*='position: absolute']) {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+
+  // Loading states for items
+  &__item-loading {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--#{config.$prefix}gray-10);
+      z-index: 1;
+      border-radius: 4px;
+    }
+
+    img {
+      opacity: 0;
+    }
+  }
+
+  // Loaded state with fade-in animation
+  &__item-loaded img {
+    animation: masonry-item-fade-in 0.3s ease forwards;
+  }
+
+  // Progressive loading indicator
+  &--loading-images {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 16px;
+      right: 16px;
+      width: 24px;
+      height: 24px;
+      border: 2px solid rgba(0, 0, 0, 0.1);
+      border-radius: 50%;
+      border-top-color: var(--#{config.$prefix}brand-border-subtle);
+      animation: masonry-spinner 0.8s linear infinite;
+      z-index: 1000;
+      pointer-events: none;
+    }
+  }
+
+  // Animations
+  @keyframes masonry-spinner {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes masonry-item-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+}

package/src/styles/06-components/_components.accordion.scss

@@ -0,0 +1,109 @@
+@use '../02-tools/tools.rem' as *;
+@use '../01-settings/settings.accordion' as accordion;
+@use '../01-settings/settings.config' as config;
+@use '../02-tools/tools.animations' as *;
+
+.c-accordion {
+  $root: &;
+
+  --#{config.$prefix}accordion-width: #{accordion.$accordion-width};
+  --#{config.$prefix}accordion-border-width: #{accordion.$accordion-border-width};
+  --#{config.$prefix}accordion-border-color: #{accordion.$accordion-border-color};
+  --#{config.$prefix}accordion-border-radius: #{accordion.$accordion-border-radius};
+  --#{config.$prefix}accordion-body-padding-x: #{rem(accordion.$accordion-body-padding-x)};
+  --#{config.$prefix}accordion-body-padding-y: #{rem(accordion.$accordion-body-padding-y)};
+  --#{config.$prefix}accordion-body-color: #{accordion.$accordion-body-color};
+  --#{config.$prefix}accordion-body-bg: #{accordion.$accordion-body-bg};
+  --#{config.$prefix}accordion-header-padding-x: #{rem(accordion.$accordion-header-padding-x)};
+  --#{config.$prefix}accordion-header-padding-y: #{rem(accordion.$accordion-header-padding-y)};
+  --#{config.$prefix}accordion-header-color: #{accordion.$accordion-header-color};
+  --#{config.$prefix}accordion-header-bg: #{accordion.$accordion-header-bg};
+  --#{config.$prefix}accordion-header-bg-hover: #{accordion.$accordion-header-bg-hover};
+  --#{config.$prefix}accordion-icon-size: #{rem(accordion.$accordion-icon-size)};
+  --#{config.$prefix}accordion-icon-color: #{accordion.$accordion-icon-color};
+  --#{config.$prefix}accordion-icon-transform: #{accordion.$accordion-icon-transform};
+  --#{config.$prefix}accordion-disable-color: #{accordion.$accordion-disable-color};
+  --panel-height: 0px;
+
+  width: 100%;
+  max-width: var(--#{config.$prefix}accordion-width);
+  border: var(--#{config.$prefix}accordion-border-width) solid
+    var(--#{config.$prefix}accordion-border-color);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--#{config.$prefix}accordion-header-color);
+    padding: var(--#{config.$prefix}accordion-header-padding-y)
+      var(--#{config.$prefix}accordion-header-padding-x);
+    background-color: var(--#{config.$prefix}accordion-header-bg);
+    border-radius: var(--#{config.$prefix}accordion-border-radius);
+    border: none;
+    cursor: pointer;
+    width: 100%;
+
+    &--icon-left {
+      flex-direction: row-reverse;
+      justify-content: flex-end;
+      gap: var(--#{config.$prefix}accordion-header-padding-x);
+    }
+
+    &:hover {
+      --#{config.$prefix}accordion-header-bg: var(--#{config.$prefix}accordion-header-bg-hover);
+    }
+  }
+
+  &__title {
+    margin-right: rem(20px);
+  }
+
+  &__icon {
+    color: var(--#{config.$prefix}accordion-icon-color);
+    font-size: var(--#{config.$prefix}accordion-icon-size);
+    will-change: transform;
+
+    @include basic-transition();
+  }
+
+  &__panel {
+    height: var(--panel-height);
+    overflow: hidden;
+    will-change: height;
+
+    @include basic-transition();
+  }
+
+  &__body {
+    color: var(--#{config.$prefix}accordion-body-color);
+    padding: var(--#{config.$prefix}accordion-body-padding-y)
+      var(--#{config.$prefix}accordion-body-padding-x);
+    background-color: var(--#{config.$prefix}accordion-body-bg);
+    border-radius: 0 0 var(--#{config.$prefix}accordion-border-radius)
+      var(--#{config.$prefix}accordion-border-radius);
+  }
+
+  &:focus,
+  &.is-focused {
+    --#{config.$prefix}accordion-border-color: var(--#{config.$prefix}focus-border-color);
+  }
+
+  &.is-open {
+    #{$root}__icon {
+      transform: rotate(var(--#{config.$prefix}accordion-icon-transform));
+    }
+
+    #{$root}__header {
+      border-radius: var(--#{config.$prefix}accordion-border-radius)
+        var(--#{config.$prefix}accordion-border-radius) 0 0;
+    }
+  }
+
+  &.is-disabled {
+    pointer-events: none;
+
+    --#{config.$prefix}accordion-header-color: var(--#{config.$prefix}accordion-disable-color);
+    --#{config.$prefix}accordion-body-color: var(--#{config.$prefix}accordion-disable-color);
+    --#{config.$prefix}accordion-icon-color: var(--#{config.$prefix}accordion-disable-color);
+  }
+}

package/src/styles/06-components/_components.avatar-group.scss

@@ -0,0 +1,85 @@
+@use 'sass:map';
+@use '../01-settings/settings.config' as *;
+@use '../01-settings/settings.avatar-group' as *;
+@use '../01-settings/settings.avatar' as avatar;
+@use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.border-radius' as *;
+@use '../02-tools/tools.animations' as *;
+@use '../01-settings/settings.typography' as *;
+
+// Avatar group component
+.c-avatar-group {
+  // CSS custom properties
+  --#{$prefix}avatar-group-gap: #{rem($avatar-group-gap)};
+  --#{$prefix}avatar-group-stacked-overlap: #{$avatar-group-stacked-overlap};
+  --#{$prefix}avatar-group-stacked-hover-gap: #{rem($avatar-group-stacked-hover-gap)};
+  --#{$prefix}avatar-group-more-color: #{$avatar-group-more-color};
+  --#{$prefix}avatar-group-more-bg: #{$avatar-group-more-bg};
+  --#{$prefix}avatar-group-more-font-size: #{$avatar-group-more-font-size};
+  --#{$prefix}avatar-group-more-font-weight: #{$avatar-group-more-font-weight};
+  --#{$prefix}avatar-group-more-border-width: #{$avatar-group-more-border-width};
+  --#{$prefix}avatar-group-more-border-color: #{$avatar-group-more-border-color};
+  --#{$prefix}avatar-group-transition-duration: #{$avatar-group-transition-duration};
+  --#{$prefix}avatar-group-transition-timing: #{$avatar-group-transition-timing};
+
+  // Base styles
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--#{$prefix}avatar-group-gap);
+
+  // More indicator
+  &__more {
+    display: grid;
+    place-items: center;
+    color: var(--#{$prefix}avatar-group-more-color);
+    font-size: var(--#{$prefix}avatar-group-more-font-size);
+    font-weight: var(--#{$prefix}avatar-group-more-font-weight);
+    background-color: var(--#{$prefix}avatar-group-more-bg);
+    border: var(--#{$prefix}avatar-group-more-border-width) solid
+      var(--#{$prefix}avatar-group-more-border-color);
+
+    // Inherit size and shape from avatars
+    width: var(--#{$prefix}avatar-size);
+    height: var(--#{$prefix}avatar-size);
+    border-radius: var(--#{$prefix}avatar-border-radius);
+  }
+
+  // Stacked variant
+  &--stacked {
+    gap: 0;
+
+    > * {
+      transition: transform var(--#{$prefix}avatar-group-transition-duration)
+        var(--#{$prefix}avatar-group-transition-timing);
+      border: 2px solid var(--#{$prefix}avatar-group-more-bg);
+    }
+
+    // Position each avatar with negative margin
+    @for $i from 1 through 10 {
+      > *:nth-child(#{$i + 1}) {
+        transform: translateX(calc((var(--#{$prefix}avatar-size) / -2) * #{$i}));
+      }
+    }
+
+    // Hover state - spread avatars apart
+    &:hover {
+      > * {
+        transform: translateX(0);
+      }
+
+      & {
+        gap: var(--#{$prefix}avatar-group-stacked-hover-gap);
+      }
+    }
+
+    // More indicator in stacked layout
+    .c-avatar-group__more {
+      font-size: var(--#{$prefix}avatar-group-more-font-size);
+      margin-left: calc(
+        var(--#{$prefix}avatar-size) * -1 * var(--#{$prefix}avatar-group-stacked-overlap) / 100
+      );
+      z-index: 1;
+    }
+  }
+}