@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/styles/02-tools/_tools.utility-api.scss

@@ -11,6 +11,7 @@
 @use 'sass:meta';
 @use '../01-settings/settings.config' as *;
 @use '../01-settings/settings.breakpoints' as *;
+@use 'tools.breakpoints' as *;
 
 // Default config for utilities
 $utility-defaults: (
@@ -62,9 +63,10 @@ $utility-defaults: (
 
     @if map.get($utility, class) == null {
       // Generate class with property name as class
+      // Responsive infix goes between prefix and value: .u-prefix-{bp}-{value}
       $class-name: if(
         $key,
-        '#{$property-class}-#{$escaped-key}#{$local-infix}',
+        '#{$property-class}#{$local-infix}-#{$escaped-key}',
         '#{$property-class}#{$local-infix}'
       );
 
@@ -77,15 +79,25 @@ $utility-defaults: (
           @each $property in $properties {
             #{$property}: $value if(map.get($utility, rtl), null, !important);
           }
-        } @else {
+        } @else if $value != null {
+          // Guard: only emit property declaration if value is not null
           #{$property-class}: $value if(map.get($utility, rtl), null, !important);
         }
+
+        // Add local CSS variables if specified
+        $local-vars: map.get($utility, local-vars);
+        @if $local-vars and list.length($local-vars) > 0 {
+          @each $local-var-name, $local-var-value in $local-vars {
+            --#{$local-var-name}: #{$local-var-value};
+          }
+        }
       }
     } @else {
       // Generate class with custom class name
       $base-class: map.get($utility, class);
       $modifier: if($key, '-#{$escaped-key}', '');
 
+      // Responsive infix goes between class and modifier: .u-class-{bp}-{value}
       .#{$base-class}#{$local-infix}#{$modifier} {
         @if $css-var and $properties {
           // Handle CSS variable generation with properties
@@ -101,9 +113,18 @@ $utility-defaults: (
           @each $property in $properties {
             #{$property}: $value if(map.get($utility, rtl), null, !important);
           }
-        } @else {
+        } @else if $value != null {
+          // Guard: only emit property declaration if value is not null
           #{$base-class}: $value if(map.get($utility, rtl), null, !important);
         }
+
+        // Add local CSS variables if specified
+        $local-vars: map.get($utility, local-vars);
+        @if $local-vars and list.length($local-vars) > 0 {
+          @each $local-var-name, $local-var-value in $local-vars {
+            --#{$local-var-name}: #{$local-var-value};
+          }
+        }
       }
     }
   }
@@ -115,7 +136,7 @@ $utility-defaults: (
 
   @if $responsive {
     @each $breakpoint in map.keys($breakpoints) {
-      $infix: call($breakpoint-infix-generator, $breakpoint);
+      $infix: meta.call($breakpoint-infix-generator, $breakpoint);
 
       @include media-breakpoint-up($breakpoint) {
         @include generate-utility($utility, $infix);
@@ -133,11 +154,9 @@ $utility-defaults: (
   $breakpoint-infix-generator: null
 ) {
   // Set default breakpoint infix generator if not provided
-  $breakpoint-infix-generator: if(
-    $breakpoint-infix-generator,
-    $breakpoint-infix-generator,
-    get-breakpoint-infix
-  );
+  @if not $breakpoint-infix-generator {
+    $breakpoint-infix-generator: meta.get-function('breakpoint-infix');
+  }
 
   @each $utility, $config in $utilities {
     // Merge default config
@@ -153,6 +172,7 @@ $utility-defaults: (
         rtl: map.get($config, rtl),
         css-var: map.get($config, css-var),
         local-vars: map.get($config, local-vars),
+        responsive: map.get($config, responsive),
       );
 
       @include generate-responsive-utilities(
@@ -160,14 +180,20 @@ $utility-defaults: (
         $breakpoints,
         $breakpoint-infix-generator
       );
+
+      // Generate print utilities if requested
+      @if map.get($config, print) == true {
+        @media print {
+          @include generate-utility($utility-map);
+        }
+      }
     }
   }
 }
 
 // Helper function to get breakpoint infix
-@function get-breakpoint-infix($breakpoint) {
-  @return if($breakpoint == null, '', '-#{$breakpoint}');
-}
+// Uses breakpoint-infix from _tools.breakpoints.scss
+// Returns '' for the smallest breakpoint (xs), '-sm', '-md', etc. for others
 
 // Helper function to escape keys for safe CSS class names
 @function _escape-key($key) {

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

@@ -117,7 +117,9 @@
   --#{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-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};
@@ -212,7 +214,6 @@
   @each $property, $value in color-maps.$focus-ring {
     --#{config.$prefix}focus-ring-#{$property}: #{$value};
   }
-
 }
 
 // Dark mode overrides
@@ -276,4 +277,4 @@
   --#{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/06-components/_components.accordion.scss

@@ -25,6 +25,12 @@
   --#{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};
+  --#{config.$prefix}accordion-focus-border-color: #{accordion.$accordion-focus-border-color};
+  --#{config.$prefix}accordion-header-font-size: #{accordion.$accordion-header-font-size};
+  --#{config.$prefix}accordion-header-font-weight: #{accordion.$accordion-header-font-weight};
+  --#{config.$prefix}accordion-header-inner-gap: #{rem(accordion.$accordion-header-inner-gap)};
+  --#{config.$prefix}accordion-transition: #{accordion.$accordion-transition};
+  --#{config.$prefix}accordion-panel-transition: #{accordion.$accordion-panel-transition};
   --panel-height: 0px;
 
   width: 100%;
@@ -33,6 +39,7 @@
     var(--#{config.$prefix}accordion-border-color);
   border-radius: var(--#{config.$prefix}accordion-border-radius);
   overflow: hidden;
+  transition: var(--#{config.$prefix}accordion-transition);
 
   &__header {
     display: flex;
@@ -45,6 +52,9 @@
     border: none;
     outline: none;
     cursor: pointer;
+    font-size: var(--#{config.$prefix}accordion-header-font-size);
+    font-weight: var(--#{config.$prefix}accordion-header-font-weight);
+    gap: var(--#{config.$prefix}accordion-header-inner-gap);
     @include basic-transition(background);
 
     @include dynamic-background(var(--#{config.$prefix}accordion-header-bg));
@@ -52,22 +62,32 @@
     &--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);
     }
+
+    @if accordion.$accordion-enable-focus-ring {
+      &:focus-visible {
+        outline: 2px solid var(--#{config.$prefix}accordion-focus-border-color);
+        outline-offset: 2px;
+      }
+    }
   }
 
   &__title {
-    margin-right: rem(20px);
+    flex: 1;
   }
 
   &__icon {
     color: var(--#{config.$prefix}accordion-icon-color);
     font-size: var(--#{config.$prefix}accordion-icon-size);
     will-change: transform;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
     @include basic-transition();
   }
@@ -77,6 +97,10 @@
     overflow: hidden;
     will-change: height;
 
+    @if accordion.$accordion-enable-smooth-scroll {
+      scroll-behavior: smooth;
+    }
+
     @include basic-transition();
   }
 
@@ -107,25 +131,43 @@
 
   &.is-disabled {
     pointer-events: none;
+    cursor: not-allowed;
 
     --#{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);
-  }
 
-  &--glass {
-    border-color: transparent;
     #{$root}__header {
-      @include dynamic-background(
-        var(--#{config.$prefix}accordion-header-bg),
-        $background-transparency-enable: true
-      );
+      cursor: not-allowed;
     }
-    #{$root}__body {
-      @include dynamic-background(
-        var(--#{config.$prefix}accordion-header-bg),
-        $background-transparency-enable: true
-      );
+  }
+
+  @if accordion.$accordion-enable-glass {
+    &--glass {
+      border-color: transparent;
+      #{$root}__header {
+        @include dynamic-background(
+          var(--#{config.$prefix}accordion-header-bg),
+          $background-transparency-enable: true
+        );
+      }
+      #{$root}__body {
+        @include dynamic-background(
+          var(--#{config.$prefix}accordion-header-bg),
+          $background-transparency-enable: true
+        );
+      }
+    }
+  }
+
+  // Reduced motion support
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+
+    #{$root}__icon,
+    #{$root}__panel,
+    #{$root}__header {
+      transition: none;
     }
   }
 }

package/src/styles/06-components/_components.atomix-glass.scss

@@ -121,20 +121,24 @@
     mix-blend-mode: screen;
     z-index: var(--atomix-z-index-5, 5);
     background: var(--atomix-glass-border-gradient-1, none);
-    box-shadow: var(--atomix-glass-border-shadow,
-        0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
-        0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
-        0 0.25rem 1rem rgba(0, 0, 0, 0.35));
+    box-shadow: var(
+      --atomix-glass-border-shadow,
+      0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
+      0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
+      0 0.25rem 1rem rgba(0, 0, 0, 0.35)
+    );
   }
 
   &__border-2 {
     mix-blend-mode: overlay;
     z-index: var(--atomix-z-index-6, 6);
     background: var(--atomix-glass-border-gradient-2, none);
-    box-shadow: var(--atomix-glass-border-shadow,
-        0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
-        0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
-        0 0.25rem 1rem rgba(0, 0, 0, 0.35));
+    box-shadow: var(
+      --atomix-glass-border-shadow,
+      0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset,
+      0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset,
+      0 0.25rem 1rem rgba(0, 0, 0, 0.35)
+    );
   }
 
   // Container styles
@@ -254,4 +258,4 @@
   @media (prefers-contrast: high) {
     border-width: var(--atomix-spacing-0-5, 0.125rem);
   }
-}
+}

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

@@ -149,15 +149,27 @@
   }
 
   &--active {
-    --#{config.$prefix}btn-bg: var(--#{config.$prefix}btn-active-bg, var(--#{config.$prefix}btn-hover-bg));
-    --#{config.$prefix}btn-color: var(--#{config.$prefix}btn-active-color, var(--#{config.$prefix}btn-hover-color));
-    --#{config.$prefix}btn-border-color: var(--#{config.$prefix}btn-active-border-color, var(--#{config.$prefix}btn-hover-border-color));
+    --#{config.$prefix}btn-bg: var(
+      --#{config.$prefix}btn-active-bg,
+      var(--#{config.$prefix}btn-hover-bg)
+    );
+    --#{config.$prefix}btn-color: var(
+      --#{config.$prefix}btn-active-color,
+      var(--#{config.$prefix}btn-hover-color)
+    );
+    --#{config.$prefix}btn-border-color: var(
+      --#{config.$prefix}btn-active-border-color,
+      var(--#{config.$prefix}btn-hover-border-color)
+    );
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
   }
 
   &--selected {
     --#{config.$prefix}btn-border-width: 2px;
-    --#{config.$prefix}btn-border-color: var(--#{config.$prefix}brand-border-subtle, var(--#{config.$prefix}primary));
+    --#{config.$prefix}btn-border-color: var(
+      --#{config.$prefix}brand-border-subtle,
+      var(--#{config.$prefix}primary)
+    );
     box-shadow: 0 0 0 2px rgba(var(--#{config.$prefix}primary-rgb, 124, 58, 237), 0.2);
   }
 

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

@@ -43,9 +43,13 @@
   padding: var(--#{config.$prefix}callout-padding-y) var(--#{config.$prefix}callout-padding-x);
   @include dynamic-background(var(--#{config.$prefix}callout-bg));
   border-radius: var(--#{config.$prefix}callout-border-radius);
-  border: var(--#{config.$prefix}callout-border-witdh) solid var(--#{config.$prefix}callout-border-color);
-  transition: opacity var(--#{config.$prefix}callout-transition-duration) var(--#{config.$prefix}callout-transition-timing),
-  transform var(--#{config.$prefix}callout-transition-duration) var(--#{config.$prefix}callout-transition-timing);
+  border: var(--#{config.$prefix}callout-border-witdh) solid
+    var(--#{config.$prefix}callout-border-color);
+  transition:
+    opacity var(--#{config.$prefix}callout-transition-duration)
+      var(--#{config.$prefix}callout-transition-timing),
+    transform var(--#{config.$prefix}callout-transition-duration)
+      var(--#{config.$prefix}callout-transition-timing);
 
   &__content {
     width: 100%;
@@ -135,7 +139,8 @@
     position: relative;
     max-width: rem.rem(350px);
     width: 100%;
-    padding: var(--#{config.$prefix}callout-tost-padding-y) var(--#{config.$prefix}callout-tost-padding-x);
+    padding: var(--#{config.$prefix}callout-tost-padding-y)
+      var(--#{config.$prefix}callout-tost-padding-x);
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
@@ -151,7 +156,9 @@
       }
 
       &__actions {
-        padding-left: calc(var(--#{config.$prefix}callout-icon-size) + var(--#{config.$prefix}callout-message-spacer));
+        padding-left: calc(
+          var(--#{config.$prefix}callout-icon-size) + var(--#{config.$prefix}callout-message-spacer)
+        );
         margin-top: var(--#{config.$prefix}callout-actions-spacer-y);
       }
 
@@ -170,29 +177,23 @@
 
   @each $color, $value in maps.$theme-colors {
     &--#{$color} {
-      @if ($color =='primary') {
+      @if ($color == 'primary') {
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}brand-bg-subtle);
         --#{config.$prefix}callout-border-color: var(--#{config.$prefix}brand-border-subtle);
         --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}brand-text-emphasis);
-      }
-
-      @else if($color =='light') {
+      } @else if($color == 'light') {
         --#{config.$prefix}callout-title-color: var(--#{config.$prefix}dark);
         --#{config.$prefix}callout-text-color: var(--#{config.$prefix}dark);
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}light);
         --#{config.$prefix}callout-border-color: var(--#{config.$prefix}primary-border-subtle);
         --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}tertiary-text-emphasis);
-      }
-
-      @else if($color =='dark') {
+      } @else if($color == 'dark') {
         --#{config.$prefix}callout-title-color: var(--#{config.$prefix}light);
         --#{config.$prefix}callout-text-color: #{$gray-4};
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}dark);
         --#{config.$prefix}callout-border-color: var(--#{config.$prefix}dark-border-subtle);
         --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}light);
-      }
-
-      @else {
+      } @else {
         --#{config.$prefix}callout-bg: var(--#{config.$prefix}#{$color}-bg-subtle);
         --#{config.$prefix}callout-border-color: var(--#{config.$prefix}#{$color}-border-subtle);
         --#{config.$prefix}callout-icon-color: var(--#{config.$prefix}#{$color}-text-emphasis);
@@ -212,12 +213,15 @@
       justify-content: center;
       align-items: center;
       padding: var(--#{config.$prefix}callout-padding-y) var(--#{config.$prefix}callout-padding-x);
-      border: var(--#{config.$prefix}callout-border-width) solid color-mix(in srgb, var(--#{config.$prefix}callout-border-color) 20%, transparent);
+      border: var(--#{config.$prefix}callout-border-width) solid
+        color-mix(in srgb, var(--#{config.$prefix}callout-border-color) 20%, transparent);
       max-width: var(--#{config.$prefix}callout-width);
       border-radius: var(--#{config.$prefix}callout-border-radius);
       width: 100%;
-      @include dynamic-background(var(--#{config.$prefix}callout-bg),
-        $background-transparency-enable: true);
+      @include dynamic-background(
+        var(--#{config.$prefix}callout-bg),
+        $background-transparency-enable: true
+      );
     }
 
     // Adjust text colors for glass effect
@@ -231,8 +235,10 @@
 
     // Glass effect for toast variant
     &#{$root}--toast {
-      @include dynamic-background(var(--#{config.$prefix}callout-bg),
-        $background-transparency-enable: true);
+      @include dynamic-background(
+        var(--#{config.$prefix}callout-bg),
+        $background-transparency-enable: true
+      );
       box-shadow:
         0 8px 32px rgba(0, 0, 0, 0.1),
         0 0 0 1px rgba(255, 255, 255, 0.1) inset;
@@ -311,4 +317,4 @@
     opacity: 1;
     transform: translateY(0);
   }
-}
+}

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

@@ -199,8 +199,6 @@
     }
   }
 
-
-
   &--sm {
     --#{$prefix}card-spacer-y: #{rem(map.get(spacing.$spacing-sizes, 2))}; // 8px
     --#{$prefix}card-spacer-x: #{rem(map.get(spacing.$spacing-sizes, 2))}; // 8px
@@ -222,7 +220,6 @@
     @include dynamic-background(var(--#{$prefix}card-bg));
   }
 
-
   &--glass {
     max-width: none;
     @include dynamic-background(var(--#{$prefix}card-bg), $background-transparency-enable: true);
@@ -350,16 +347,14 @@
 
   @each $color, $value in maps.$theme-colors {
     &--#{$color} {
-      @if ($color =='primary') {
+      @if ($color == 'primary') {
         --#{$prefix}card-bg: var(--#{$prefix}brand-bg-subtle);
         --#{$prefix}card-bg-hover: var(--#{$prefix}brand-bg-subtle);
         --#{$prefix}card-border-color: var(--#{$prefix}brand-border-subtle);
         --#{$prefix}card-title-color: var(--#{$prefix}brand-text-emphasis);
         --#{$prefix}card-icon-bg: var(--#{$prefix}brand-text-emphasis);
         --#{$prefix}card-icon-color: var(--#{$prefix}brand-bg-subtle);
-      }
-
-      @else if ($color =='dark') {
+      } @else if ($color == 'dark') {
         --#{$prefix}card-bg: var(--#{$prefix}dark);
         --#{$prefix}card-bg-hover: var(--#{$prefix}dark-hover);
         --#{$prefix}card-border-color: var(--#{$prefix}dark);
@@ -367,9 +362,7 @@
         --#{$prefix}card-text-color: var(--#{$prefix}light);
         --#{$prefix}card-icon-bg: var(--#{$prefix}light);
         --#{$prefix}card-icon-color: var(--#{$prefix}dark);
-      }
-
-      @else if ($color =='light') {
+      } @else if ($color == 'light') {
         --#{$prefix}card-bg: var(--#{$prefix}light);
         --#{$prefix}card-bg-hover: var(--#{$prefix}light-hover);
         --#{$prefix}card-border-color: var(--#{$prefix}light);
@@ -377,9 +370,7 @@
         --#{$prefix}card-text-color: var(--#{$prefix}dark);
         --#{$prefix}card-icon-bg: var(--#{$prefix}dark);
         --#{$prefix}card-icon-color: var(--#{$prefix}light);
-      }
-
-      @else {
+      } @else {
         --#{$prefix}card-bg: var(--#{$prefix}#{$color}-bg-subtle);
         --#{$prefix}card-bg-hover: var(--#{$prefix}#{$color}-bg-subtle);
         --#{$prefix}card-border-color: var(--#{$prefix}#{$color}-border-subtle);
@@ -456,4 +447,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}

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

@@ -31,7 +31,7 @@
   border: var(--#{$prefix}chart-border-width) solid var(--#{$prefix}chart-border-color);
   border-radius: var(--#{$prefix}chart-border-radius);
   overflow: hidden;
-  box-shadow: 
+  box-shadow:
     0 1px 3px rgba(0, 0, 0, 0.12),
     0 1px 2px rgba(0, 0, 0, 0.24),
     0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.05);
@@ -48,7 +48,7 @@
     content: '';
     position: absolute;
     inset: 0;
-    background: 
+    background:
       linear-gradient(
         135deg,
         rgba(var(--#{$prefix}primary-rgb), 0.08) 0%,
@@ -85,9 +85,13 @@
       rgba(var(--#{$prefix}secondary-rgb), 0.05),
       transparent
     );
-    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
-    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
     mask-composite: exclude;
     pointer-events: none;
     z-index: 2;
@@ -96,7 +100,7 @@
   }
 
   &:hover {
-    box-shadow: 
+    box-shadow:
       0 8px 24px rgba(0, 0, 0, 0.12),
       0 4px 8px rgba(0, 0, 0, 0.16),
       0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.1),
@@ -143,14 +147,14 @@
     background: var(--#{$prefix}body-bg);
   }
   &--elevated {
-    box-shadow: 
+    box-shadow:
       0 12px 32px rgba(0, 0, 0, 0.15),
       0 6px 12px rgba(0, 0, 0, 0.2),
       0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.1),
       0 0 60px rgba(var(--#{$prefix}primary-rgb), 0.12);
 
     &:hover {
-      box-shadow: 
+      box-shadow:
         0 16px 40px rgba(0, 0, 0, 0.18),
         0 8px 16px rgba(0, 0, 0, 0.24),
         0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.15),
@@ -190,12 +194,12 @@
 
   &--selected {
     border-color: rgba(var(--#{$prefix}primary-rgb), 0.3);
-    box-shadow: 
+    box-shadow:
       0 4px 16px rgba(0, 0, 0, 0.1),
       0 2px 4px rgba(0, 0, 0, 0.12),
       0 0 0 2px rgba(var(--#{$prefix}primary-rgb), 0.2),
       0 0 30px rgba(var(--#{$prefix}primary-rgb), 0.15);
-    background: 
+    background:
       linear-gradient(
         135deg,
         rgba(var(--#{$prefix}primary-rgb), 0.08) 0%,
@@ -213,7 +217,7 @@
     cursor: pointer;
 
     &:hover {
-      box-shadow: 
+      box-shadow:
         0 8px 24px rgba(0, 0, 0, 0.12),
         0 4px 8px rgba(0, 0, 0, 0.16),
         0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.1),
@@ -222,7 +226,7 @@
     }
 
     &:active {
-      box-shadow: 
+      box-shadow:
         0 2px 8px rgba(0, 0, 0, 0.1),
         0 1px 2px rgba(0, 0, 0, 0.12);
     }
@@ -601,14 +605,13 @@
       content: '';
       position: absolute;
       inset: 0;
-      background: 
-        linear-gradient(
-          180deg,
-          rgba(var(--#{$prefix}primary-rgb), 0.03) 0%,
-          transparent 30%,
-          transparent 70%,
-          rgba(var(--#{$prefix}secondary-rgb), 0.02) 100%
-        );
+      background: linear-gradient(
+        180deg,
+        rgba(var(--#{$prefix}primary-rgb), 0.03) 0%,
+        transparent 30%,
+        transparent 70%,
+        rgba(var(--#{$prefix}secondary-rgb), 0.02) 100%
+      );
       pointer-events: none;
       z-index: 1;
     }