@shohojdhara/atomix 0.1.16 → 0.1.18

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

@@ -8,119 +8,127 @@
 @use '../02-tools/tools.rem' as *;
 
 .c-btn {
-    $root: &; 
-  
-    --#{config.$prefix}btn-padding-x: #{button.$btn-padding-x};
-    --#{config.$prefix}btn-padding-y: #{button.$btn-padding-y};
-    --#{config.$prefix}btn-font-family: #{button.$btn-font-family};
-    --#{config.$prefix}btn-font-size: #{button.$btn-font-size};
-    --#{config.$prefix}btn-font-weight: #{button.$btn-font-weight};
-    --#{config.$prefix}btn-line-height: #{button.$btn-line-height};
-    --#{config.$prefix}btn-icon-size: #{rem(button.$btn-icon-size)};
-    --#{config.$prefix}btn-color: #{button.$btn-color};
-    --#{config.$prefix}btn-bg: transparent;
-    --#{config.$prefix}btn-border-width: #{button.$btn-border-width};
-    --#{config.$prefix}btn-border-color: transparent;
-    --#{config.$prefix}btn-border-radius: #{button.$btn-border-radius};
-    --#{config.$prefix}btn-hover-border-color: transparent;
-    --#{config.$prefix}btn-box-shadow: #{button.$btn-box-shadow};
-    --#{config.$prefix}btn-disabled-opacity: #{button.$btn-disabled-opacity};
-    --#{config.$prefix}btn-focus-box-shadow: 0 0 0 #{button.$btn-focus-width} rgba(var(--#{config.$prefix}btn-focus-shadow-rgb), 0.5);
-    --#{config.$prefix}btn-inner-gap: #{rem(button.$btn-inner-gap)};
-  
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--#{config.$prefix}btn-inner-gap);
-    padding: var(--#{config.$prefix}btn-padding-y) var(--#{config.$prefix}btn-padding-x);
-    font-family: var(--#{config.$prefix}btn-font-family);
-    font-size: var(--#{config.$prefix}btn-font-size);
-    font-weight: var(--#{config.$prefix}btn-font-weight);
-    line-height: var(--#{config.$prefix}btn-line-height);
-    color: var(--#{config.$prefix}btn-color);
-    text-align: center;
-    text-decoration: if(colors.$link-decoration == none, null, none);
-    white-space: button.$btn-white-space;
-    vertical-align: middle;
-    background-color: var(--#{config.$prefix}btn-bg);
-    cursor: if(button.$enable-button-pointers, pointer, null);
-    user-select: none;
-    border: var(--#{config.$prefix}btn-border-width) solid
-      var(--#{config.$prefix}btn-border-color);
-    border-radius: var(--#{config.$prefix}btn-border-radius);
-    transition: button.$btn-transition;
-  
-    &__icon {
-      font-size: var(--#{config.$prefix}btn-icon-size);
-    }
-  
-    &:hover {
-      color: var(--#{config.$prefix}btn-hover-color);
-      text-decoration: if(colors.$link-hover-decoration == underline, none, null);
-      background-color: var(--#{config.$prefix}btn-hover-bg);
-      border-color: var(--#{config.$prefix}btn-hover-border-color);
-    }
-  
-  
-    @each $color, $value in color-maps.$theme-colors {
-      &--#{$color} {
-          @include btn-variant($color, $value);
-      }
-    }
-  
-    @each $color, $value in color-maps.$theme-colors {
-      &--outline-#{$color} {
-        @include btn-outline-variant($color);
-      }
-    }
-  
-    &--lg {
-      @include btn-size(button.$btn-padding-y-lg, button.$btn-padding-x-lg, button.$btn-font-size-lg, button.$btn-border-radius-lg);
-  
-      #{$root}__icon {
-        --#{config.$prefix}btn-icon-size: #{rem(button.$btn-icon-size-lg)};
-      }
-    }
-  
-    &--sm {
-      @include btn-size(button.$btn-padding-y-sm, button.$btn-padding-x-sm, button.$btn-font-size-sm, button.$btn-border-radius-sm);
-  
-      #{$root}__icon {
-        --#{config.$prefix}btn-icon-size: #{rem(button.$btn-icon-size-sm)};
-      }
+  $root: &;
+
+  --#{config.$prefix}btn-padding-x: #{button.$btn-padding-x};
+  --#{config.$prefix}btn-padding-y: #{button.$btn-padding-y};
+  --#{config.$prefix}btn-font-family: #{button.$btn-font-family};
+  --#{config.$prefix}btn-font-size: #{button.$btn-font-size};
+  --#{config.$prefix}btn-font-weight: #{button.$btn-font-weight};
+  --#{config.$prefix}btn-line-height: #{button.$btn-line-height};
+  --#{config.$prefix}btn-icon-size: #{rem(button.$btn-icon-size)};
+  --#{config.$prefix}btn-color: #{button.$btn-color};
+  --#{config.$prefix}btn-bg: transparent;
+  --#{config.$prefix}btn-border-width: #{button.$btn-border-width};
+  --#{config.$prefix}btn-border-color: transparent;
+  --#{config.$prefix}btn-border-radius: #{button.$btn-border-radius};
+  --#{config.$prefix}btn-hover-border-color: transparent;
+  --#{config.$prefix}btn-box-shadow: #{button.$btn-box-shadow};
+  --#{config.$prefix}btn-disabled-opacity: #{button.$btn-disabled-opacity};
+  --#{config.$prefix}btn-focus-box-shadow: 0 0 0 #{button.$btn-focus-width}
+    rgba(var(--#{config.$prefix}btn-focus-shadow-rgb), 0.5);
+  --#{config.$prefix}btn-inner-gap: #{rem(button.$btn-inner-gap)};
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--#{config.$prefix}btn-inner-gap);
+  padding: var(--#{config.$prefix}btn-padding-y) var(--#{config.$prefix}btn-padding-x);
+  font-family: var(--#{config.$prefix}btn-font-family);
+  font-size: var(--#{config.$prefix}btn-font-size);
+  font-weight: var(--#{config.$prefix}btn-font-weight);
+  line-height: var(--#{config.$prefix}btn-line-height);
+  color: var(--#{config.$prefix}btn-color);
+  text-align: center;
+  text-decoration: if(colors.$link-decoration == none, null, none);
+  white-space: button.$btn-white-space;
+  vertical-align: middle;
+  background-color: var(--#{config.$prefix}btn-bg);
+  cursor: if(button.$enable-button-pointers, pointer, null);
+  user-select: none;
+  border: var(--#{config.$prefix}btn-border-width) solid var(--#{config.$prefix}btn-border-color);
+  border-radius: var(--#{config.$prefix}btn-border-radius);
+  transition: button.$btn-transition;
+
+  &__icon {
+    font-size: var(--#{config.$prefix}btn-icon-size);
+  }
+
+  &:hover {
+    color: var(--#{config.$prefix}btn-hover-color);
+    text-decoration: if(colors.$link-hover-decoration == underline, none, null);
+    background-color: var(--#{config.$prefix}btn-hover-bg);
+    border-color: var(--#{config.$prefix}btn-hover-border-color);
+  }
+
+  @each $color, $value in color-maps.$theme-colors {
+    &--#{$color} {
+      @include btn-variant($color, $value);
     }
-  
-    &--rounded {
-      --#{config.$prefix}btn-border-radius: #{border-radius.$border-radius-pill};
+  }
+
+  @each $color, $value in color-maps.$theme-colors {
+    &--outline-#{$color} {
+      @include btn-outline-variant($color);
     }
-  
-    &--link {
-      --#{config.$prefix}btn-color: #{button.$btn-link-color};
-      --#{config.$prefix}btn-color-hover: #{button.$btn-link-color-hover};
-      --#{config.$prefix}btn-font-weight: #{button.$btn-link-font-weight};
-  
-      border-radius: 0px;
-      border-bottom: var(--#{config.$prefix}btn-border-width) solid button.$btn-link-border-color;
-  
-      &:hover {
-        border-bottom: var(--#{config.$prefix}btn-border-width) solid button.$btn-link-border-color-hover;
-      }
+  }
+
+  &--lg {
+    @include btn-size(
+      button.$btn-padding-y-lg,
+      button.$btn-padding-x-lg,
+      button.$btn-font-size-lg,
+      button.$btn-border-radius-lg
+    );
+
+    #{$root}__icon {
+      --#{config.$prefix}btn-icon-size: #{rem(button.$btn-icon-size-lg)};
     }
-  
-    &--icon {
-      --#{config.$prefix}btn-padding-x: var(--#{config.$prefix}btn-padding-y);
+  }
+
+  &--sm {
+    @include btn-size(
+      button.$btn-padding-y-sm,
+      button.$btn-padding-x-sm,
+      button.$btn-font-size-sm,
+      button.$btn-border-radius-sm
+    );
+
+    #{$root}__icon {
+      --#{config.$prefix}btn-icon-size: #{rem(button.$btn-icon-size-sm)};
     }
-  
-    &:disabled,
-    &--disabled,
-    fieldset:disabled & {
-      color: var(--#{config.$prefix}btn-disabled-color);
-      pointer-events: none;
-      background-color: var(--#{config.$prefix}btn-disabled-bg);
-      background-image: if(button.$enable-gradients, none, null);
-      border-color: var(--#{config.$prefix}btn-disabled-border-color);
-      opacity: var(--#{config.$prefix}btn-disabled-opacity);
+  }
+
+  &--rounded {
+    --#{config.$prefix}btn-border-radius: #{border-radius.$border-radius-pill};
+  }
+
+  &--link {
+    --#{config.$prefix}btn-color: #{button.$btn-link-color};
+    --#{config.$prefix}btn-color-hover: #{button.$btn-link-color-hover};
+    --#{config.$prefix}btn-font-weight: #{button.$btn-link-font-weight};
+
+    border-radius: 0px;
+    border-bottom: var(--#{config.$prefix}btn-border-width) solid button.$btn-link-border-color;
+
+    &:hover {
+      border-bottom: var(--#{config.$prefix}btn-border-width) solid
+        button.$btn-link-border-color-hover;
     }
   }
-  
-  
+
+  &--icon {
+    --#{config.$prefix}btn-padding-x: var(--#{config.$prefix}btn-padding-y);
+  }
+
+  &:disabled,
+  &--disabled,
+  fieldset:disabled & {
+    color: var(--#{config.$prefix}btn-disabled-color);
+    pointer-events: none;
+    background-color: var(--#{config.$prefix}btn-disabled-bg);
+    background-image: if(button.$enable-gradients, none, null);
+    border-color: var(--#{config.$prefix}btn-disabled-border-color);
+    opacity: var(--#{config.$prefix}btn-disabled-opacity);
+  }
+}

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

@@ -40,15 +40,16 @@
   width: 100%;
   max-width: var(--#{config.$prefix}callout-width);
   gap: var(--#{config.$prefix}callout-actions-spacer);
-  padding: var(--#{config.$prefix}callout-padding-y)
-    var(--#{config.$prefix}callout-padding-x);
+  padding: var(--#{config.$prefix}callout-padding-y) var(--#{config.$prefix}callout-padding-x);
   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);
+  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 {
     display: flex;
@@ -104,7 +105,9 @@
     font-size: var(--#{config.$prefix}callout-close-btn-size);
     cursor: pointer;
     border-radius: rem.rem(4px);
-    transition: background-color 0.2s ease, transform 0.2s ease;
+    transition:
+      background-color 0.2s ease,
+      transform 0.2s ease;
 
     &:hover {
       background-color: rgba(0, 0, 0, 0.05);
@@ -134,7 +137,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;
@@ -150,7 +154,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);
       }
 
@@ -169,7 +175,7 @@
 
   @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);
@@ -179,7 +185,7 @@
         --#{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);
@@ -189,7 +195,7 @@
         --#{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);
-      }      
+      }
     }
   }
 
@@ -209,12 +215,12 @@
   gap: rem.rem(8px);
   max-width: 100%;
   pointer-events: none; // Allow clicking through the container
-  
+
   // Make toasts clickable
   .c-callout--toast {
     pointer-events: auto;
   }
-  
+
   // Position variants
   @each $position, $props in callout.$callout-toast-positions {
     &--#{$position} {
@@ -223,7 +229,7 @@
       }
     }
   }
-  
+
   // Animation variants by position
   &--top-right,
   &--top-left,
@@ -232,7 +238,7 @@
       animation-name: calloutToastInTop;
     }
   }
-  
+
   &--bottom-right,
   &--bottom-left,
   &--bottom-center {

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

@@ -37,8 +37,7 @@
   width: 100%;
   max-width: var(--#{$prefix}card-width);
   padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
-  border: var(--#{$prefix}card-border-width) solid
-    var(--#{$prefix}card-border-color);
+  border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
   border-radius: var(--#{$prefix}card-border-radius);
   background-color: var(--#{$prefix}card-bg);
   overflow: hidden;
@@ -99,8 +98,7 @@
 
   &--row {
     display: flex;
-    padding: var(--#{$prefix}card-row-spacer-y)
-      var(--#{$prefix}card-row-spacer-x);
+    padding: var(--#{$prefix}card-row-spacer-y) var(--#{$prefix}card-row-spacer-x);
 
     #{$root} {
       &__header {
@@ -126,8 +124,7 @@
     padding: 0;
 
     #{$root}__body {
-      padding: var(--#{$prefix}card-row-spacer-y)
-        var(--#{$prefix}card-row-spacer-x);
+      padding: var(--#{$prefix}card-row-spacer-y) var(--#{$prefix}card-row-spacer-x);
     }
 
     #{$root}__image {
@@ -135,8 +132,7 @@
     }
 
     #{$root}__footer {
-      padding: var(--#{$prefix}card-row-spacer-y)
-        var(--#{$prefix}card-row-spacer-x);
+      padding: var(--#{$prefix}card-row-spacer-y) var(--#{$prefix}card-row-spacer-x);
       padding-top: 0;
     }
   }
@@ -145,8 +141,8 @@
 // Elevation effect for ElevationCard
 .is-elevated {
   .c-card {
-    box-shadow: var(--#{$prefix}box-shadow-lg, 0 16px 48px rgba(0,0,0,0.175));
+    box-shadow: var(--#{$prefix}box-shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.175));
     z-index: 1;
-    transition: box-shadow 0.2s cubic-bezier(0.4,0,0.2,1);
+    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   }
 }

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

@@ -4,15 +4,14 @@
 @use '../02-tools/tools.rem' as *;
 
 .c-checkbox-group {
-    --#{$prefix}checkbox-group-items-spacer-y: #{rem($checkbox-group-items-spacer-y)};
-    --#{$prefix}checkbox-group-items-spacer-x: #{rem($checkbox-group-items-spacer-x)};
+  --#{$prefix}checkbox-group-items-spacer-y: #{rem($checkbox-group-items-spacer-y)};
+  --#{$prefix}checkbox-group-items-spacer-x: #{rem($checkbox-group-items-spacer-x)};
 
-    display: flex;
-    flex-direction: column;
-    gap: var(--#{$prefix}checkbox-group-items-spacer-y) var(--#{$prefix}checkbox-group-items-spacer-x);
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$prefix}checkbox-group-items-spacer-y) var(--#{$prefix}checkbox-group-items-spacer-x);
 
-    
-    &--horizontal {
-        flex-direction: row;
-    }
-}
+  &--horizontal {
+    flex-direction: row;
+  }
+}

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

@@ -36,13 +36,12 @@
     width: var(--#{$prefix}checkbox-width);
     height: var(--#{$prefix}checkbox-height);
     color: currentColor;
-    border: var(--#{$prefix}checkbox-border-width) solid
-      var(--#{$prefix}checkbox-border-color);
+    border: var(--#{$prefix}checkbox-border-width) solid var(--#{$prefix}checkbox-border-color);
     border-radius: var(--#{$prefix}checkbox-border-radius);
     overflow: hidden;
     @include basic-transition();
 
-    &[type="radio"] {
+    &[type='radio'] {
       border-radius: $border-radius-pill;
     }
 
@@ -96,8 +95,6 @@
         color: var(--#{$prefix}checkbox-checked-text-color-disabled) !important;
       }
     }
-
-   
   }
 
   &__label {
@@ -110,15 +107,11 @@
 
     #{$root} {
       &__input {
-        border-color: var(
-          --#{$prefix}checkbox-border-color-disabled
-        ) !important;
+        border-color: var(--#{$prefix}checkbox-border-color-disabled) !important;
         cursor: not-allowed;
 
         &::before {
-          color: var(
-            --#{$prefix}checkbox-checked-text-color-disabled
-          ) !important;
+          color: var(--#{$prefix}checkbox-checked-text-color-disabled) !important;
         }
       }
     }
@@ -126,17 +119,17 @@
 
   &.is-error {
     #{$root} {
-        &__input {
-            border-color: var(--#{$prefix}checkbox-border-color-error) !important;
-        }
+      &__input {
+        border-color: var(--#{$prefix}checkbox-border-color-error) !important;
+      }
     }
   }
 
   &--mixed {
     #{$root} {
-        &__input::before {
-            content: '\f0d6';
-        }
+      &__input::before {
+        content: '\f0d6';
+      }
     }
   }
 }

package/src/styles/06-components/_components.color-mode-toggle.scss

@@ -13,24 +13,24 @@
   border-radius: 50%;
   transition: background-color 0.2s ease;
   color: var(--#{$prefix}body-color);
-  
+
   &:hover {
     background-color: rgba(0, 0, 0, 0.05);
   }
-  
+
   &:focus {
     outline: none;
     box-shadow: 0 0 0 2px var(--#{$prefix}primary);
   }
-  
+
   svg {
     width: rem(24px);
     height: rem(24px);
   }
-  
-  [data-#{$prefix}theme="dark"] & {
+
+  [data-#{$prefix}theme='dark'] & {
     &:hover {
       background-color: rgba(255, 255, 255, 0.1);
     }
   }
-} 
+}

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

@@ -5,60 +5,59 @@
 @use '../02-tools/tools.rem' as *;
 
 .c-countdown {
-    $root: &; 
-
-    --#{$prefix}countdown-color: #{$countdown-color};
-    --#{$prefix}countdown-font-size: #{$countdown-font-size};
-    --#{$prefix}countdown-font-weight: #{$countdown-font-weight};
-    --#{$prefix}countdown-focused-time-font-size: #{$countdown-focused-time-font-size};
-    --#{$prefix}countdown-focused-label-font-size: #{$countdown-focused-label-font-size};
-    --#{$prefix}countdown-focused-border-radius: #{$countdown-focused-border-radius};
-    --#{$prefix}countdown-focused-bg: #{$countdown-focused-bg};
-    --#{$prefix}countdown-item-padding-x: #{rem($countdown-item-padding-x)};
-    --#{$prefix}countdown-item-padding-y: #{rem($countdown-item-padding-y)};
-    --#{$prefix}countdown-items-gap: #{rem($countdown-items-gap)};
-    --#{$prefix}countdown-focused-items-gap: #{rem($countdown-focused-items-gap)};
-
+  $root: &;
+
+  --#{$prefix}countdown-color: #{$countdown-color};
+  --#{$prefix}countdown-font-size: #{$countdown-font-size};
+  --#{$prefix}countdown-font-weight: #{$countdown-font-weight};
+  --#{$prefix}countdown-focused-time-font-size: #{$countdown-focused-time-font-size};
+  --#{$prefix}countdown-focused-label-font-size: #{$countdown-focused-label-font-size};
+  --#{$prefix}countdown-focused-border-radius: #{$countdown-focused-border-radius};
+  --#{$prefix}countdown-focused-bg: #{$countdown-focused-bg};
+  --#{$prefix}countdown-item-padding-x: #{rem($countdown-item-padding-x)};
+  --#{$prefix}countdown-item-padding-y: #{rem($countdown-item-padding-y)};
+  --#{$prefix}countdown-items-gap: #{rem($countdown-items-gap)};
+  --#{$prefix}countdown-focused-items-gap: #{rem($countdown-focused-items-gap)};
+
+  display: flex;
+  align-items: center;
+  gap: var(--#{$prefix}countdown-items-gap);
+
+  &__time {
     display: flex;
-    align-items: center;
-    gap: var(--#{$prefix}countdown-items-gap);
-
-    &__time {
-        display: flex;
-    }
-
-    &__time-count {
-        color: var(--#{$prefix}countdown-color);
-        font-size: var(--#{$prefix}countdown-font-size);
-        font-weight: var(--#{$prefix}countdown-font-weight);
-    }
-
-    &__separator {
-        color: var(--#{$prefix}countdown-color);
-        font-size: var(--#{$prefix}countdown-font-size);
+  }
+
+  &__time-count {
+    color: var(--#{$prefix}countdown-color);
+    font-size: var(--#{$prefix}countdown-font-size);
+    font-weight: var(--#{$prefix}countdown-font-weight);
+  }
+
+  &__separator {
+    color: var(--#{$prefix}countdown-color);
+    font-size: var(--#{$prefix}countdown-font-size);
+  }
+
+  &__time-label {
+    @extend .c-countdown__time-count;
+  }
+
+  &--focused {
+    gap: var(--#{$prefix}countdown-focused-items-gap);
+
+    #{$root} {
+      &__time {
+        flex-direction: column;
+        align-items: center;
+        padding: var(--#{$prefix}countdown-item-padding-y) var(--#{$prefix}countdown-item-padding-x);
+        border-radius: var(--#{$prefix}countdown-focused-border-radius);
+        background-color: var(--#{$prefix}countdown-focused-bg);
+      }
+
+      &__time-label {
+        font-size: var(--#{$prefix}countdown-focused-label-font-size);
+        font-weight: $font-weight-normal;
+      }
     }
-
-    &__time-label {
-        @extend .c-countdown__time-count;
-    }
-
-    &--focused {
-        gap: var(--#{$prefix}countdown-focused-items-gap);
-
-        #{$root} {
-            &__time {
-                flex-direction: column;
-                align-items: center;
-                padding: var(--#{$prefix}countdown-item-padding-y) var(--#{$prefix}countdown-item-padding-x);
-                border-radius: var(--#{$prefix}countdown-focused-border-radius);
-                background-color: var(--#{$prefix}countdown-focused-bg);   
-            }
-
-            &__time-label {
-                font-size: var(--#{$prefix}countdown-focused-label-font-size);
-                font-weight: $font-weight-normal;
-            }
-        }
-    }
-
+  }
 }