@shohojdhara/atomix 0.5.6 → 0.5.7

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

@@ -36,21 +36,19 @@
     font-size: var(--#{$prefix}tooltip-font-size);
     font-weight: var(--#{$prefix}tooltip-font-weight);
     padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
-    @include dynamic-background(var(--#{$prefix}tooltip-bg));
     border-radius: var(--#{$prefix}tooltip-border-radius);
     box-shadow: var(--#{$prefix}tooltip-box-shadow);
     z-index: 2;
     opacity: 0;
     pointer-events: auto; // Allow interaction with tooltip content
-
     // Animation
     transition:
       opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
       transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-
     // Initial states for animation based on position would be complex to do purely generically here without separate classes
     // So we stick to a simple scale/fade
     transform: scale(0.95);
+    @include dynamic-background(var(--#{$prefix}tooltip-bg));
 
     &.is-active {
       opacity: 1;
@@ -65,9 +63,9 @@
     border-radius: calc(
       (var(--#{$prefix}tooltip-arrow-size) - var(--#{$prefix}tooltip-border-radius)) / 2
     );
-    @include dynamic-background(var(--#{$prefix}tooltip-bg));
     z-index: 1;
     transform: rotate(45deg);
+    @include dynamic-background(var(--#{$prefix}tooltip-bg));
   }
 
   &--left &__arrow,

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

@@ -65,10 +65,9 @@
   width: 100%;
   max-width: var(--#{$prefix}upload-width);
   padding: var(--#{$prefix}upload-padding-y) var(--#{$prefix}upload-padding-x);
-  @include dynamic-background(var(--#{$prefix}upload-bg));
   border-radius: var(--#{$prefix}upload-border-radius);
-
   @include basic-transition();
+  @include dynamic-background(var(--#{$prefix}upload-bg));
 
   &:hover {
     @include dynamic-background(var(--#{$prefix}upload-hover-bg));

package/src/styles/06-components/_components.video-player.scss

@@ -36,10 +36,10 @@
 
   position: relative;
   width: 100%;
-  @include dynamic-background(var(--#{$prefix}-video-player-bg, #000));
   border-radius: var(--#{$prefix}-video-player-border-radius, 0.5rem);
   overflow: hidden;
   font-family: var(--#{$prefix}-font-family-base);
+  @include dynamic-background(var(--#{$prefix}-video-player-bg, #000));
 
   // &:focus-within,
   // &:focus {
@@ -352,11 +352,11 @@
     bottom: 3.125rem;
     right: 0;
     min-width: 12.5rem;
-    @include dynamic-background(rgba(var(--#{$prefix}primary-rgb), 0.7));
     border-radius: 0.5rem;
     padding: 0.5rem;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
+    @include dynamic-background(rgba(var(--#{$prefix}primary-rgb), 0.7));
   }
 
   &__settings-tabs {