@shohojdhara/atomix 0.1.16 → 0.1.17

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

@@ -1,184 +0,0 @@
-@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

@@ -1,15 +0,0 @@
-@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

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

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

@@ -1,16 +0,0 @@
-@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

@@ -1,16 +0,0 @@
-@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

@@ -1,38 +0,0 @@
-@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

@@ -1,9 +0,0 @@
-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

@@ -1,12 +0,0 @@
-@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

@@ -1,6 +0,0 @@
-// 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

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

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

@@ -1,35 +0,0 @@
-@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

@@ -1,25 +0,0 @@
-@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

@@ -1,90 +0,0 @@
-@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

@@ -1,103 +0,0 @@
-@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

@@ -1,84 +0,0 @@
-@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;
-    }
-  }
-}