@shohojdhara/atomix 0.5.6 → 0.5.8

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

@@ -41,10 +41,10 @@
   display: inline-block;
   min-width: var(--#{config.$prefix}menu-min-width);
   padding: var(--#{config.$prefix}menu-item-padding-y) var(--#{config.$prefix}menu-item-padding-x);
-  @include dynamic-background(var(--#{config.$prefix}menu-bg));
   border-radius: var(--#{config.$prefix}menu-border-radius);
   box-shadow: var(--#{config.$prefix}menu-box-shadow);
   z-index: 5;
+  @include dynamic-background(var(--#{config.$prefix}menu-bg));
 
   &__container {
     width: 100%;
@@ -96,10 +96,10 @@
     color: var(--#{config.$prefix}menu-item-color);
     font-size: var(--#{config.$prefix}menu-item-font-size);
     font-weight: var(--#{config.$prefix}menu-item-font-weight);
-    @include dynamic-background(var(--#{config.$prefix}menu-item-bg));
     border-radius: var(--#{config.$prefix}menu-border-radius);
     cursor: pointer;
     @include animations.basic-transition();
+    @include dynamic-background(var(--#{config.$prefix}menu-item-bg));
 
     &:hover {
       color: var(--#{config.$prefix}menu-item-color);

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

@@ -141,9 +141,9 @@
     font-size: var(--#{config.$prefix}messages-text-font-size);
     padding: var(--#{config.$prefix}messages-text-padding-y)
       var(--#{config.$prefix}messages-text-padding-x);
-    @include dynamic-background(var(--#{config.$prefix}messages-text-bg));
     border-radius: border.$border-radius-sm var(--#{config.$prefix}messages-text-border-radius)
       var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm;
+    @include dynamic-background(var(--#{config.$prefix}messages-text-bg));
   }
 
   &__file {
@@ -163,8 +163,8 @@
     @include square(var(--#{config.$prefix}messages-file-icon-size));
     color: var(--#{config.$prefix}tertiary-text-emphasis);
     margin-right: var(--#{config.$prefix}messages-file-icon-margin-right);
-    @include dynamic-background(var(--#{config.$prefix}body-bg));
     border-radius: border.$border-radius-pill;
+    @include dynamic-background(var(--#{config.$prefix}body-bg));
   }
 
   &__file-name {
@@ -294,8 +294,8 @@
     border: var(--#{config.$prefix}messages-input-border-width) solid
       var(--#{config.$prefix}messages-input-border-color);
     border-radius: var(--#{config.$prefix}messages-input-border-radius);
-    @include dynamic-background(var(--#{config.$prefix}messages-bg));
     resize: none;
+    @include dynamic-background(var(--#{config.$prefix}messages-bg));
 
     &::placeholder {
       color: var(--#{config.$prefix}messages-input-placeholder-color);
@@ -313,12 +313,13 @@
     place-items: center;
     align-self: flex-end;
     padding: rem.rem(10px);
-    @include dynamic-background(var(--#{config.$prefix}brand-bg-subtle));
     color: var(--#{config.$prefix}invert-text-emphasis);
     border-radius: border.$border-radius-pill;
     cursor: pointer;
     appearance: none;
     border: 0;
+    @include dynamic-background(var(--#{config.$prefix}brand-bg-subtle));
+
 
     .c-icon {
       width: var(--#{config.$prefix}messages-form-submit-icon-size);
@@ -355,55 +356,52 @@
 
     // Text messages styling
     #{$root}__text {
-      @include dynamic-background(
-        var(--#{config.$prefix}body-bg),
-        $enable-transparency: true
-      );
       backdrop-filter: blur(8px);
       border: 1px solid rgba(255, 255, 255, 0.2);
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      @include dynamic-background(var(--#{config.$prefix}body-bg), $enable-transparency: true);
     }
 
     // Self message text styling
     #{$root}__content--self {
       #{$root}__text {
+        border: 1px solid rgba(var(--#{config.$prefix}primary-rgb), 0.3);
+        backdrop-filter: blur(8px);
         @include dynamic-background(
           var(--#{config.$prefix}brand-bg-subtle),
           $enable-transparency: true
         );
-        border: 1px solid rgba(var(--#{config.$prefix}primary-rgb), 0.3);
-        backdrop-filter: blur(8px);
       }
 
       #{$root}__file {
+        border: 1px solid rgba(var(--#{config.$prefix}primary-rgb), 0.3);
+        backdrop-filter: blur(8px);
         @include dynamic-background(
           var(--#{config.$prefix}brand-bg-subtle),
           $enable-transparency: true
         );
-        border: 1px solid rgba(var(--#{config.$prefix}primary-rgb), 0.3);
-        backdrop-filter: blur(8px);
       }
     }
 
     // File attachment styling
     #{$root}__file {
-      @include dynamic-background(
-        var(--#{config.$prefix}brand-bg-subtle),
-        $enable-transparency: true
-      );
       border: 1px solid rgba(var(--#{config.$prefix}primary-rgb), 0.3);
       backdrop-filter: blur(8px);
       border: 1px solid rgba(255, 255, 255, 0.2);
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      @include dynamic-background(
+        var(--#{config.$prefix}brand-bg-subtle),
+        $enable-transparency: true
+      );
     }
 
     #{$root}__file-icon {
+      backdrop-filter: blur(8px);
+      border: 1px solid rgba(255, 255, 255, 0.15);
       @include dynamic-background(
         var(--#{config.$prefix}brand-bg-subtle),
         $enable-transparency: true
       );
-      backdrop-filter: blur(8px);
-      border: 1px solid rgba(255, 255, 255, 0.15);
     }
 
     // Image styling

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

@@ -49,9 +49,9 @@
   &__backdrop {
     position: absolute;
     inset: 0;
-    @include dynamic-background(var(--#{config.$prefix}modal-backdrop-bg));
     opacity: 0;
     transition: 0.3s;
+    @include dynamic-background(var(--#{config.$prefix}modal-backdrop-bg));
   }
 
   &__dialog {
@@ -76,11 +76,11 @@
     width: 100%;
     max-height: 100%;
     padding: var(--#{config.$prefix}modal-inner-padding);
-    @include dynamic-background(var(--#{config.$prefix}modal-content-bg));
     box-shadow: var(--#{config.$prefix}modal-content-box-shadow);
     border-radius: var(--#{config.$prefix}modal-content-border-radius);
     overflow: hidden;
     pointer-events: auto;
+    @include dynamic-background(var(--#{config.$prefix}modal-content-bg));
   }
 
   &__header {
@@ -144,15 +144,15 @@
   &--glass {
     #{$root} {
       &__content {
-        @include dynamic-background(
-          var(--#{config.$prefix}modal-content-bg),
-          $enable-transparency: true
-        );
         box-shadow: none;
         border-radius: inherit;
 
         width: var(--#{config.$prefix}modal-width);
         height: 100%;
+        @include dynamic-background(
+          var(--#{config.$prefix}modal-content-bg),
+          $enable-transparency: true
+        );
       }
     }
   }

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

@@ -135,14 +135,11 @@
     left: 50%;
     transform: translateX(-50%);
     z-index: 1000;
-    @include dynamic-background(var(--#{$prefix}body-bg));
     border: 1px solid var(--#{$prefix}border-color);
     border-radius: $border-radius-pill;
     box-shadow: var(--#{$prefix}box-shadow-lg);
     padding: rem(8px) rem(16px);
     backdrop-filter: blur(10px);
-
-    // Add subtle background transparency
     @include dynamic-background(rgba(var(--#{$prefix}body-bg-rgb), 0.95));
 
     // Ensure items are properly spaced in float mode

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

@@ -37,8 +37,8 @@
   position: relative;
   padding: var(--#{$prefix}navbar-padding-y) 0;
   border-bottom: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-border-color);
-  @include dynamic-background(var(--#{$prefix}navbar-bg));
   z-index: var(--#{$prefix}navbar-z-index);
+  @include dynamic-background(var(--#{$prefix}navbar-bg));
 
   &__container {
     display: flex;
@@ -79,11 +79,11 @@
     width: var(--#{$prefix}navbar-toggler-size);
     height: var(--#{$prefix}navbar-toggler-size);
     padding: 0;
-    @include dynamic-background(var(--#{$prefix}navbar-toggler-bg));
     border: var(--#{$prefix}navbar-toggler-border);
     border-radius: var(--#{$prefix}navbar-toggler-border-radius);
     cursor: pointer;
     transition: all 0.15s ease-in-out;
+    @include dynamic-background(var(--#{$prefix}navbar-toggler-bg));
 
     &:hover {
       opacity: 0.8;
@@ -142,11 +142,11 @@
     left: 0;
     width: 100%;
     height: 100%;
-    @include dynamic-background(var(--#{$prefix}navbar-backdrop-bg));
     z-index: var(--#{$prefix}navbar-backdrop-z-index);
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease-in-out;
+    @include dynamic-background(var(--#{$prefix}navbar-backdrop-bg));
 
     &.is-open {
       opacity: 1;

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

@@ -82,11 +82,11 @@
     font-size: var(--#{config.$prefix}pagination-font-size);
     padding: var(--#{config.$prefix}pagination-padding-y)
       var(--#{config.$prefix}pagination-padding-x);
-    @include dynamic-background(var(--#{config.$prefix}pagination-bg));
     border-radius: var(--#{config.$prefix}pagination-border-radius);
     border: none;
     cursor: pointer;
     user-select: none;
+    @include dynamic-background(var(--#{config.$prefix}pagination-bg));
 
     &:hover {
       --#{config.$prefix}pagination-color: var(--#{config.$prefix}pagination-hover-color);
@@ -189,9 +189,9 @@
     text-align: center;
     border: 1px solid var(--#{config.$prefix}pagination-color);
     border-radius: var(--#{config.$prefix}pagination-border-radius);
-    @include dynamic-background(var(--#{config.$prefix}pagination-bg));
     color: var(--#{config.$prefix}pagination-color);
     transition: all 0.2s ease-in-out;
+    @include dynamic-background(var(--#{config.$prefix}pagination-bg));
 
     &:focus {
       outline: none;
@@ -212,12 +212,12 @@
     @include size.square(var(--#{config.$prefix}pagination-size));
     padding: var(--#{config.$prefix}pagination-padding-y)
       var(--#{config.$prefix}pagination-padding-x);
-    @include dynamic-background(var(--#{config.$prefix}pagination-bg));
     border: 1px solid var(--#{config.$prefix}pagination-color);
     border-radius: var(--#{config.$prefix}pagination-border-radius);
     color: var(--#{config.$prefix}pagination-color);
     cursor: pointer;
     transition: all 0.2s ease-in-out;
+    @include dynamic-background(var(--#{config.$prefix}pagination-bg));
 
     &:hover {
       --#{config.$prefix}pagination-color: var(--#{config.$prefix}pagination-hover-color);

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

@@ -26,11 +26,11 @@
 
 // Modern panel styles
 %panel-base {
-  @include dynamic-background($photoviewer-component-background-color);
   border: 1px solid $photoviewer-component-border-color;
   border-radius: $photoviewer-image-container-border-radius;
   box-shadow: $photoviewer-info-panel-shadow;
   backdrop-filter: blur(8px);
+  @include dynamic-background($photoviewer-component-background-color);
 }
 
 // Custom scrollbar styling
@@ -102,11 +102,11 @@
   border: 2px solid transparent;
   border-radius: $photoviewer-thumbnail-border-radius;
   padding: 0;
-  @include dynamic-background(transparent);
   cursor: pointer;
   overflow: hidden;
   position: relative;
   box-shadow: $photoviewer-thumbnail-shadow;
+  @include dynamic-background(transparent);
 
   &:hover {
     transform: translateY(-2px);
@@ -175,9 +175,9 @@ body.is-open-photoviewer {
   width: 100vw;
   height: 100vh;
   z-index: 1000;
-  @include dynamic-background(transparent);
   opacity: 1;
   transition-property: opacity;
+  @include dynamic-background(transparent);
 
   &__backdrop {
     @extend %standard-transition;

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

@@ -38,19 +38,19 @@
     flex-direction: column;
     gap: var(--#{$prefix}popover-inner-gap-y) var(--#{$prefix}popover-inner-gap-x);
     padding: var(--#{$prefix}popover-padding-y) var(--#{$prefix}popover-padding-x);
-    @include dynamic-background(var(--#{$prefix}popover-bg));
     border-radius: var(--#{$prefix}popover-border-radius);
     box-shadow: var(--#{$prefix}popover-box-shadow);
+    @include dynamic-background(var(--#{$prefix}popover-bg));
   }
 
   &__arrow {
     position: absolute;
     width: var(--#{$prefix}popover-arrow-size);
     height: var(--#{$prefix}popover-arrow-size);
-    @include dynamic-background(var(--#{$prefix}popover-bg));
     box-shadow: var(--#{$prefix}popover-box-shadow);
     z-index: 1;
     transform-origin: center;
+    @include dynamic-background(var(--#{$prefix}popover-bg));
   }
 
   &.is-open {
@@ -94,11 +94,11 @@
 
   &--glass {
     #{$root}__content-inner {
+      box-shadow: none;
       @include dynamic-background(
         var(--#{$prefix}popover-bg),
         $enable-transparency: true
       );
-      box-shadow: none;
     }
   }
 

package/src/styles/06-components/_components.product-review.scss

@@ -22,11 +22,11 @@
 
   padding: var(--#{config.$prefix}product-review-padding);
   border-radius: var(--#{config.$prefix}product-review-border-radius);
-  @include dynamic-background(var(--#{config.$prefix}product-review-bg));
   border: 1px solid var(--#{config.$prefix}product-review-border-color);
   width: 100%;
   max-width: rem.rem(600px);
   margin: 0 auto;
+  @include dynamic-background(var(--#{config.$prefix}product-review-bg));
 
   &__header {
     display: flex;
@@ -90,10 +90,10 @@
     padding: rem.rem(12px);
     border: 1px solid var(--#{config.$prefix}product-review-border-color);
     border-radius: var(--#{config.$prefix}border-radius);
-    @include dynamic-background(var(--#{config.$prefix}body-bg));
     color: var(--#{config.$prefix}body-color);
     font-family: inherit;
     resize: vertical;
+    @include dynamic-background(var(--#{config.$prefix}body-bg));
 
     &:focus {
       outline: none;

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

@@ -22,18 +22,18 @@
   width: 100%;
   max-width: var(--#{config.$prefix}progress-width);
   height: var(--#{config.$prefix}progress-bar-height);
-  @include dynamic-background(var(--#{config.$prefix}progress-bg));
   border-radius: var(--#{config.$prefix}progress-border-radius);
   overflow: hidden;
+  @include dynamic-background(var(--#{config.$prefix}progress-bg));
 
   &__bar {
     width: var(--#{config.$prefix}progress-bar-width);
     height: var(--#{config.$prefix}progress-bar-height);
     color: var(--#{config.$prefix}progress-bar-color);
-    @include dynamic-background(var(--#{config.$prefix}progress-bar-bg));
     border-radius: var(--#{config.$prefix}progress-border-radius);
     transition: var(--#{config.$prefix}progress-bar-transition)
       var(--#{config.$prefix}progress-bar-easing);
+    @include dynamic-background(var(--#{config.$prefix}progress-bar-bg));
   }
 
   @each $color, $value in maps.$theme-colors {

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

@@ -60,9 +60,9 @@
   &__overlay {
     position: absolute;
     inset: 0;
-    @include dynamic-background(var(--#{config.$prefix}river-overlay));
     opacity: var(--#{config.$prefix}river-overlay-opacity);
     border-radius: var(--#{config.$prefix}river-border-radius);
+    @include dynamic-background(var(--#{config.$prefix}river-overlay));
   }
 
   &__container {

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

@@ -117,8 +117,8 @@
     left: 0;
     width: 100%;
     height: 100%;
-    @include dynamic-background(var(--#{$prefix}sectionintro-overlay-bg-color));
     opacity: var(--#{$prefix}sectionintro-overlay-opacity);
+    @include dynamic-background(var(--#{$prefix}sectionintro-overlay-bg-color));
   }
 
   &--has-bg {

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

@@ -49,12 +49,11 @@
     padding: var(--#{$prefix}select-padding-x) var(--#{$prefix}select-padding-y);
     color: var(--#{$prefix}select-placeholder-color);
     font-size: var(--#{$prefix}select-font-size);
-    @include dynamic-background(var(--#{$prefix}select-bg));
     border: 1px solid var(--#{$prefix}select-border-color);
     border-radius: var(--#{$prefix}select-border-radius);
     cursor: pointer;
-
     @include transition.basic-transition();
+    @include dynamic-background(var(--#{$prefix}select-bg));
 
     &:hover {
       border-color: var(--#{$prefix}select-border-color-hover);
@@ -72,18 +71,18 @@
     @include transition.basic-transition();
   }
 
-  &__body {
+  &__dropdown {
     position: absolute;
     width: 100%;
     height: 0px;
     top: calc(100% + var(--#{$prefix}select-panel-spacer-y));
     left: 0;
-    @include dynamic-background(var(--#{$prefix}select-panel-bg));
     border-radius: var(--#{$prefix}select-panel-border-radius);
     box-shadow: var(--#{$prefix}select-panel-box-shadow);
     overflow: hidden;
-    @include transition.basic-transition;
     z-index: 99;
+    @include transition.basic-transition;
+    @include dynamic-background(var(--#{$prefix}select-panel-bg));
   }
 
   &__panel {
@@ -99,9 +98,9 @@
   &__item {
     padding: var(--#{$prefix}select-item-padding-x) var(--#{$prefix}select-item-padding-y);
     color: var(--#{$prefix}select-item-color);
-    @include dynamic-background(var(--#{$prefix}select-item-bg));
     border-radius: var(--#{$prefix}select-item-border-radius);
     @include transition.basic-transition;
+    @include dynamic-background(var(--#{$prefix}select-item-bg));
 
     &,
     & > * {

package/src/styles/06-components/_components.side-menu.scss

@@ -51,11 +51,11 @@
   // 2. Base Component Styles
   width: 100%;
   padding: var(--#{config.$prefix}side-menu-padding-y) var(--#{config.$prefix}side-menu-padding-x);
-  @include dynamic-background(var(--#{config.$prefix}side-menu-bg));
   border-radius: var(--#{config.$prefix}side-menu-border-radius);
   border: var(--#{config.$prefix}side-menu-border-width) solid
     var(--#{config.$prefix}side-menu-border-color);
   box-shadow: var(--#{config.$prefix}side-menu-box-shadow);
+  @include dynamic-background(var(--#{config.$prefix}side-menu-bg));
 
   // 3. Responsive Styles
   @include media-breakpoint-down(md) {
@@ -96,7 +96,6 @@
     width: 100%;
     padding: var(--#{config.$prefix}side-menu-toggler-padding-y)
       var(--#{config.$prefix}side-menu-toggler-padding-x);
-    @include dynamic-background(var(--#{config.$prefix}side-menu-toggler-bg));
     border: none;
     border-radius: var(--#{config.$prefix}side-menu-toggler-border-radius);
     cursor: pointer;
@@ -104,6 +103,7 @@
     transition: var(--#{config.$prefix}side-menu-toggler-transition);
     text-align: left;
     margin: 0;
+    @include dynamic-background(var(--#{config.$prefix}side-menu-toggler-bg));
 
     &:hover {
       @include dynamic-background(var(--#{config.$prefix}side-menu-toggler-hover-bg));
@@ -184,18 +184,18 @@
     color: var(--#{config.$prefix}side-menu-item-color);
     font-size: var(--#{config.$prefix}side-menu-item-font-size);
     font-weight: var(--#{config.$prefix}side-menu-item-font-weight);
-    @include dynamic-background(var(--#{config.$prefix}side-menu-item-bg));
     border: none;
     border-radius: var(--#{config.$prefix}side-menu-item-border-radius);
     text-decoration: none;
     cursor: pointer;
     transition: var(--#{config.$prefix}side-menu-item-transition);
     position: relative;
+    @include dynamic-background(var(--#{config.$prefix}side-menu-item-bg));
 
     &:hover {
       color: var(--#{config.$prefix}side-menu-item-hover-color);
-      @include dynamic-background(var(--#{config.$prefix}side-menu-item-hover-bg));
       text-decoration: none;
+      @include dynamic-background(var(--#{config.$prefix}side-menu-item-hover-bg));
     }
 
     &:focus-visible {
@@ -214,17 +214,17 @@
     // 5. State Classes
     &.is-active {
       color: var(--#{config.$prefix}side-menu-item-active-color);
-      @include dynamic-background(var(--#{config.$prefix}side-menu-item-active-bg));
       font-weight: typography.$font-weight-medium;
+      @include dynamic-background(var(--#{config.$prefix}side-menu-item-active-bg));
     }
 
     &.is-disabled,
     &[aria-disabled='true'] {
       color: var(--#{config.$prefix}side-menu-item-disabled-color);
-      @include dynamic-background(var(--#{config.$prefix}side-menu-item-disabled-bg));
       cursor: not-allowed;
       pointer-events: none;
       opacity: 0.6;
+      @include dynamic-background(var(--#{config.$prefix}side-menu-item-disabled-bg));
     }
   }
 

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

@@ -17,14 +17,6 @@
   display: inline-block;
   width: var(--#{$prefix}skeleton-width);
   min-height: var(--#{$prefix}skeleton-height);
-  @include dynamic-background(
-    linear-gradient(
-      90deg,
-      var(--#{$prefix}skeleton-gradient-from-color) 25%,
-      var(--#{$prefix}skeleton-gradient-to-color) 37%,
-      var(--#{$prefix}skeleton-gradient-from-color) 63%
-    )
-  );
   background-size: 400% 100%;
   border-radius: var(--#{$prefix}skeleton-border-radius);
   animation-name: #{$prefix}-skeleton-loading;
@@ -34,6 +26,14 @@
   pointer-events: none;
   vertical-align: middle;
   cursor: wait;
+  @include dynamic-background(
+    linear-gradient(
+      90deg,
+      var(--#{$prefix}skeleton-gradient-from-color) 25%,
+      var(--#{$prefix}skeleton-gradient-to-color) 37%,
+      var(--#{$prefix}skeleton-gradient-from-color) 63%
+    )
+  );
 
   &--rect {
     width: calc(var(--#{$prefix}skeleton-height) * 5.15);

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

@@ -72,9 +72,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    @include dynamic-background(slider.$slider-empty-background);
     border: slider.$slider-empty-border;
     border-radius: slider.$slider-empty-border-radius;
+    @include dynamic-background(slider.$slider-empty-background);
   }
 }
 
@@ -117,7 +117,6 @@
   height: var(--#{config.$prefix}slider-nav-size);
   border: none;
   border-radius: slider.$slider-nav-border-radius;
-  @include dynamic-background(slider.$slider-nav-background);
   color: slider.$slider-nav-color;
   cursor: pointer;
   pointer-events: auto;
@@ -127,11 +126,12 @@
   justify-content: center;
   transition: slider.$slider-nav-transition;
   box-shadow: slider.$slider-nav-shadow;
+  @include dynamic-background(slider.$slider-nav-background);
 
   &:hover {
-    @include dynamic-background(slider.$slider-nav-background-hover);
     transform: translateY(-50%) scale(1.05);
     box-shadow: slider.$slider-nav-shadow-hover;
+    @include dynamic-background(slider.$slider-nav-background-hover);
   }
 
   &:active {
@@ -188,14 +188,14 @@
   height: slider.$slider-pagination-bullet-size;
   border-radius: slider.$slider-pagination-bullet-border-radius;
   border: none;
-  @include dynamic-background(slider.$slider-pagination-bullet-background);
   cursor: pointer;
   pointer-events: auto;
   transition: slider.$slider-pagination-transition;
+  @include dynamic-background(slider.$slider-pagination-bullet-background);
 
   &:hover {
-    @include dynamic-background(slider.$slider-pagination-bullet-background-hover);
     transform: scale(1.2);
+    @include dynamic-background(slider.$slider-pagination-bullet-background-hover);
   }
 
   &:active {
@@ -203,8 +203,8 @@
   }
 
   &--active {
-    @include dynamic-background(slider.$slider-pagination-bullet-background-active);
     transform: scale(1.2);
+    @include dynamic-background(slider.$slider-pagination-bullet-background-active);
   }
 }
 

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

@@ -54,8 +54,8 @@
   &__line {
     width: var(--#{$prefix}steps-line-width);
     height: var(--#{$prefix}steps-line-height);
-    @include dynamic-background(var(--#{$prefix}steps-item-bg));
     transition: 1s;
+    @include dynamic-background(var(--#{$prefix}steps-item-bg));
   }
 
   &__content {
@@ -71,8 +71,8 @@
     @include square(var(--#{$prefix}steps-item-number-size));
     color: var(--#{$prefix}steps-item-number-color);
     font-size: var(--#{$prefix}steps-item-number-font-size);
-    @include dynamic-background(var(--#{$prefix}steps-item-number-bg));
     border-radius: var(--#{$prefix}steps-item-number-border-radius);
+    @include dynamic-background(var(--#{$prefix}steps-item-number-bg));
   }
 
   &__text {

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

@@ -68,8 +68,8 @@
     border: var(--#{$prefix}tabs-nav-btn-border-width) solid transparent;
     border-bottom: var(--#{$prefix}tabs-nav-btn-border-width) solid
       var(--#{$prefix}tabs-nav-btn-border-color);
-    @include dynamic-background(var(--#{$prefix}tabs-nav-btn-bg));
     @include basic-transition();
+    @include dynamic-background(var(--#{$prefix}tabs-nav-btn-bg));
 
     &:active,
     &.is-active {
@@ -89,8 +89,8 @@
       );
 
       color: var(--#{$prefix}tabs-nav-btn-border-disabled-color);
-      @include dynamic-background(var(--#{$prefix}tabs-nav-btn-bg-disabled));
       pointer-events: none;
+      @include dynamic-background(var(--#{$prefix}tabs-nav-btn-bg-disabled));
     }
 
     &:focus-visible {

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

@@ -27,9 +27,9 @@
   margin-bottom: todo.$todo-margin-bottom;
   border: 1px solid var(--#{config.$prefix}todo-border-color);
   border-radius: var(--#{config.$prefix}todo-border-radius);
-  @include dynamic-background(var(--#{config.$prefix}todo-bg));
   color: var(--#{config.$prefix}todo-color);
   padding: todo.$todo-padding;
+  @include dynamic-background(var(--#{config.$prefix}todo-bg));
 
   // Title
   &__title {