@sc-360-v2/storefront-cms-library 0.2.100 → 0.3.0

package/dist/cartDropdownOverlay.scss

@@ -125,3 +125,16 @@ $button-padding: 6px 12px;
     margin-bottom: 8px;
   }
 }
+
+// .overlay-panel {
+//   background: white;
+//   border: 1px solid #ccc;
+//   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
+//   border-radius: 6px;
+//   padding: 10px;
+//   max-height: 300px;
+//   overflow-y: auto;
+//   transition:
+//     opacity 0.2s ease,
+//     transform 0.2s ease;
+// }

package/dist/faq.scss

@@ -97,14 +97,14 @@
         --_sf-show-icon-ff: none;
       }
       &[data-divider-show="true"] {
-        // .accordion-item:not(:last-child) {
-        //   border-bottom: var(
-        //       --_ctm-mob-dn-dr-dr-wh,
-        //       var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
-        //     )
-        //     var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se)))
-        //     var(--_ctm-mob-dn-dr-br-cr, var(--_ctm-tab-dn-dr-br-cr, var(--_ctm-dn-dr-br-cr)));
-        // }
+        .accordion-item:not(:last-child) {
+          border-bottom: var(
+              --_ctm-mob-dn-dr-dr-wh,
+              var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
+            )
+            var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se)))
+            var(--_ctm-mob-dn-dr-br-cr, var(--_ctm-tab-dn-dr-br-cr, var(--_ctm-dn-dr-br-cr)));
+        }
       }
     }
 
@@ -113,12 +113,12 @@
       display: grid;
       overflow: clip;
       // height: 30px;
+      gap: var(
+        --_ctm-mob-lt-te-ad-dn-sg,
+        var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
+      );
 
-      // padding-block: var(--_ctm-lt-im-vl-pg, var(--_tst-lt-im-vl-pg));
-      // padding-inline: var(
-      //   --_ctm-mob-lt-im-hl-pg,
-      //   var(--_ctm-tab-lt-im-hl-pg, var(--_ctm-lt-im-hl-pg))
-      // );
+      padding-block: var(--_ctm-lt-im-vl-pg, var(--_tst-lt-im-vl-pg));
 
       grid-template-rows: var(
         --_self-active-gtr,
@@ -189,11 +189,15 @@
         align-items: center;
         justify-content: var(--_sf-jc, space-between);
         cursor: pointer;
-        // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
+        padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
         background-color: var(
           --_ctm-mob-dn-cd-an-im-bd-cr,
           var(--_ctm-tab-dn-cd-an-im-bd-cr, var(--_ctm-dn-cd-an-im-bd-cr))
         );
+        padding-inline: var(
+          --_ctm-mob-lt-im-hl-pg,
+          var(--_ctm-tab-lt-im-hl-pg, var(--_ctm-lt-im-hl-pg))
+        );
 
         p {
           // padding-inline: var(--_sf-cd-gp);
@@ -277,10 +281,6 @@
       &[data-state="open"] {
         // overflow: inherit;
         // height: auto;
-        gap: var(
-          --_ctm-mob-lt-te-ad-dn-sg,
-          var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
-        );
 
         --_self-active-gtr: minmax(
             var(
@@ -339,7 +339,7 @@
           align-items: center;
           justify-content: var(--_sf-jc, space-between);
           cursor: pointer;
-          // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
+          padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
           background-color: var(
             --_ctm-mob-dn-ed-an-im-bd-cr,
             var(--_ctm-tab-dn-ed-an-im-bd-cr, var(--_ctm-dn-ed-an-im-bd-cr))
@@ -412,11 +412,15 @@
         }
         .accordion-description {
           display: block;
-          // padding-block-end: var(--_sf-dc-pd-bt);
+          padding-block-end: var(--_sf-dc-pd-bt);
           background-color: var(
             --_ctm-mob-dn-ed-an-im-bd-cr-dc,
             var(--_ctm-tab-dn-ed-an-im-bd-cr-dc, var(--_ctm-dn-ed-an-im-bd-cr-dc))
           );
+          padding-inline: var(
+            --_ctm-mob-lt-im-hl-pg,
+            var(--_ctm-tab-lt-im-hl-pg, var(--_ctm-lt-im-hl-pg))
+          );
 
           p {
             color: var(

package/dist/item-stock.scss

@@ -1,8 +1,5 @@
 @use "sass:map";
 @use "sass:list";
-@function ctm-var($base) {
-  @return unquote("var(--_ctm-mob-#{$base}, var(--_ctm-tab-#{$base}, var(--_ctm-#{$base})))");
-}
 
 [data-div-type="element"] {
   &[data-element-type="itemStock"] {
@@ -37,41 +34,82 @@
       .item__stock__heading {
         position: relative;
         .item__stock__text {
-          font-family: ctm-var(dn-im-sk-tt-ft-fy);
-          font-size: ctm-var(dn-im-sk-tt-ft-se);
-          color: ctm-var(dn-im-sk-tt-cr);
-          font-weight: ctm-var(dn-im-sk-tt-ft-wt);
-          font-style: ctm-var(dn-im-sk-tt-ft-se-ic);
-          text-decoration: ctm-var(dn-im-sk-tt-ue);
-          text-align: ctm-var(dn-im-sk-tt-tt-an);
-          letter-spacing: ctm-var(dn-im-sk-tt-lr-sg);
-          line-height: ctm-var(dn-im-sk-tt-le-ht);
-        }
-        .stock_message_conatainer {
-          display: flex;
-          padding: 2px 8px 2px 6px;
-          align-items: center;
-          gap: 4px;
-          mix-blend-mode: multiply;
-          background-color: ctm-var(dn-im-sk-tt-bd-cr);
-          border-width: ctm-var(dn-im-sk-tt-br-wh);
-          border-color: ctm-var(dn-im-sk-tt-br-cr);
-          border-style: ctm-var(dn-im-sk-tt-br-se);
-          border-radius: ctm-var(dn-im-sk-tt-br-rs);
-          box-shadow: ctm-var(dn-im-sk-tt-sw-ae) ctm-var(dn-im-sk-tt-sw-br)
-            ctm-var(dn-im-sk-tt-sw-sd) ctm-var(dn-im-sk-tt-sw-cr);
-
-          .stock_messages {
-            font-family: ctm-var(dn-im-sk-tt-ft-fy);
-            font-size: ctm-var(dn-im-sk-tt-ft-se);
-            color: ctm-var(dn-im-sk-tt-cr);
-            font-weight: ctm-var(dn-im-sk-tt-ft-wt);
-            font-style: ctm-var(dn-im-sk-tt-ft-se-ic);
-            text-decoration: ctm-var(dn-im-sk-tt-ue);
-            text-align: ctm-var(dn-im-sk-tt-tt-an);
-            letter-spacing: ctm-var(dn-im-sk-tt-lr-sg);
-            line-height: ctm-var(dn-im-sk-tt-le-ht);
-          }
+          color: var(
+            --_ctm-mob-dn-im-sk-tt-cr,
+            var(--_ctm-tab-dn-im-sk-tt-cr, var(--_ctm-dn-im-sk-tt-cr))
+          );
+          font-family: var(
+              --_ctm-mob-dn-im-sk-tt-ft-fy,
+              var(--_ctm-tab-dn-im-sk-tt-ft-fy, var(--_ctm-dn-im-sk-tt-ft-fy))
+            ),
+            sans-serif;
+          font-size: var(
+            --_ctm-mob-dn-im-sk-tt-ft-se,
+            var(--_ctm-tab-dn-im-sk-tt-ft-se, var(--_ctm-dn-im-sk-tt-ft-se))
+          );
+          font-weight: var(
+            --_ctm-mob-dn-im-sk-tt-ft-wt,
+            var(--_ctm-tab-dn-im-sk-tt-ft-wt, var(--_ctm-dn-im-sk-tt-ft-wt))
+          );
+          font-style: var(
+            --_ctm-mob-dn-im-sk-tt-ft-se-ic,
+            var(--_ctm-tab-dn-im-sk-tt-ft-se-ic, var(--_ctm-dn-im-sk-tt-ft-se-ic))
+          );
+          text-align: var(
+            --_ctm-mob-dn-im-sk-tt-tt-an,
+            var(--_ctm-tab-dn-im-sk-tt-tt-an, var(--_ctm-dn-im-sk-tt-tt-an))
+          );
+          letter-spacing: var(
+            --_ctm-mob-dn-im-sk-tt-lr-sg,
+            var(--_ctm-tab-dn-im-sk-tt-lr-sg, var(--_ctm-dn-im-sk-tt-lr-sg))
+          );
+          line-height: var(
+            --_ctm-mob-dn-im-sk-tt-le-ht,
+            var(--_ctm-tab-dn-im-sk-tt-le-ht, var(--_ctm-dn-im-sk-tt-le-ht))
+          );
+          text-decoration: var(
+            --_ctm-mob-dn-im-sk-tt-ue,
+            var(--_ctm-tab-dn-im-sk-tt-ue, var(--_ctm-dn-im-sk-tt-ue))
+          );
+          background-color: var(
+            --_ctm-mob-dn-im-sk-tt-bd-cr,
+            var(--_ctm-tab-dn-im-sk-tt-bd-cr, var(--_ctm-dn-im-sk-tt-bd-cr))
+          );
+          border-color: var(
+            --_ctm-mob-dn-im-sk-tt-br-cr,
+            var(--_ctm-tab-dn-im-sk-tt-br-cr, var(--_ctm-dn-im-sk-tt-br-cr))
+          );
+          border-style: var(
+            --_ctm-mob-dn-im-sk-tt-br-se,
+            var(--_ctm-tab-dn-im-sk-tt-br-se, var(--_ctm-dn-im-sk-tt-br-se))
+          );
+          border-width: var(
+            --_ctm-mob-dn-im-sk-tt-br-wh,
+            var(--_ctm-tab-dn-im-sk-tt-br-wh, var(--_ctm-dn-im-sk-tt-br-wh))
+          );
+          border-radius: var(
+            --_ctm-mob-dn-im-sk-tt-br-rs,
+            var(--_ctm-tab-dn-im-sk-tt-br-rs, var(--_ctm-dn-im-sk-tt-br-rs))
+          );
+          box-shadow: var(
+            --_show-text-content-shadow,
+            var(
+                --_ctm-mob-dn-im-sk-tt-sw-ae,
+                var(--_ctm-tab-dn-im-sk-tt-sw-ae, var(--_ctm-dn-im-sk-tt-sw-ae))
+              )
+              var(
+                --_ctm-mob-dn-im-sk-tt-sw-br,
+                var(--_ctm-tab-dn-im-sk-tt-sw-br, var(--_ctm-dn-im-sk-tt-sw-br))
+              )
+              var(
+                --_ctm-mob-dn-im-sk-tt-sw-sd,
+                var(--_ctm-tab-dn-im-sk-tt-sw-sd, var(--_ctm-dn-im-sk-tt-sw-sd))
+              )
+              var(
+                --_ctm-mob-dn-im-sk-tt-sw-cr,
+                var(--_ctm-tab-dn-im-sk-tt-sw-cr, var(--_ctm-dn-im-sk-tt-sw-cr))
+              )
+          );
         }
       }
     }

package/dist/map.scss

@@ -3,7 +3,7 @@
 
 $tpgp: 20px;
 $bm: 30px;
-$ics: -1px;
+$ics: 2px;
 
 $data: (
   leftTop: (
@@ -90,7 +90,7 @@ $data: (
     ),
   ),
   bottomLeft: (
-    transform: translate(calc(-100% + #{$bm}), calc(-50% + (#{$bm} * 2.7))),
+    transform: translate(calc(-100% + #{$bm}), calc(-50% + (#{$bm} * 2.70))),
     border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
     icon: (
       right: #{$bm},
@@ -100,7 +100,7 @@ $data: (
     ),
   ),
   bottomCenter: (
-    transform: translate(calc(-50% - #{$ics}), calc(-50% + (#{$bm} * 2.7))),
+    transform: translate(calc(-50% - #{$ics}), calc(-50% + (#{$bm} * 2.70))),
     border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
     icon: (
       right: 50%,
@@ -110,7 +110,7 @@ $data: (
     ),
   ),
   bottomRight: (
-    transform: translate(calc(0% - #{$bm}), calc(-50% + (#{$bm} * 2.7))),
+    transform: translate(calc(0% - #{$bm}), calc(-50% + (#{$bm} * 2.70))),
     border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
     icon: (
       left: 30px,
@@ -174,7 +174,7 @@ $data: (
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
-    &[data-hotspot-position="topLeft"] {
+&[data-hotspot-position="topLeft"] {
       --_show-shadow: none;
       .hotspot__tooltip {
         border-style: var(--_ctm-dn-tp-dn-br-se);
@@ -491,37 +491,37 @@ $data: (
       }
       .hotspot__container {
         position: absolute;
-        top: 43%;
-        left: 12%;
-        .hotspot__main {
-          position: relative;
-          .hotspot {
-            background: var(--_ctm-dn-ht-se-bd-cr);
-            // height: var(--_ctm-dn-tp-tt-dn-ft-se);
-            // width: var(--_ctm-dn-tp-tt-dn-ft-se);
-            position: absolute;
-            cursor: pointer;
-            width: var(--_ctm-dn-ht-se-ht-se);
-            height: var(--_ctm-dn-ht-se-ht-se);
-            background-color: var(--_ctm-dn-ht-se-bd-cr);
-            display: flex;
-            align-items: center;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            box-sizing: border-box;
-            justify-content: center;
-            animation: scaleInOut var(--_ctm-dn-ht-se-an-fy) infinite;
-            &[data-hotspot-shape="circle"] {
-              border-radius: 50%;
-            }
-            &[data-hotspot-shape="any"] {
-              border-radius: var(--_ctm-dn-ht-se-br-rs);
-            }
+        top:43%;
+        left:12%;
+      .hotspot__main {
+        position: relative;
+        .hotspot {
+          background: var(--_ctm-dn-ht-se-bd-cr);
+          // height: var(--_ctm-dn-tp-tt-dn-ft-se);
+          // width: var(--_ctm-dn-tp-tt-dn-ft-se);
+          position: absolute;
+          cursor: pointer;
+          width: var(--_ctm-dn-ht-se-ht-se);
+          height: var(--_ctm-dn-ht-se-ht-se);
+          background-color: var(--_ctm-dn-ht-se-bd-cr);
+          display: flex;
+          align-items: center;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          box-sizing: border-box;
+          justify-content: center;
+          animation: scaleInOut var(--_ctm-dn-ht-se-an-fy) infinite;
+          &[data-hotspot-shape="circle"] {
+            border-radius: 50%;
+          }
+          &[data-hotspot-shape="any"] {
+            border-radius: var(--_ctm-dn-ht-se-br-rs);
           }
         }
       }
-      .hotspot__tooltip {
+    }
+    .hotspot__tooltip {
         --_sf-br-vl: var(--_ctm-dn-tp-dn-br-rs, 0px);
         position: absolute;
         background: var(--_ctm-dn-tp-dn-bd-cr);
@@ -530,8 +530,8 @@ $data: (
         width: var(--_ctm-dn-tp-dn-tp-wh);
         min-height: 100px;
         height: var(--_ctm-dn-tp-dn-tp-ht);
-        top: 43%;
-        left: 12%;
+        top:43%;
+        left:12%;
         // top: var(--_sf-im-psn-tp, 0);
         // left: var(--_sf-im-psn-lt, 0);
 

package/dist/modal.scss

@@ -1,4 +1,3 @@
-//modalv1
 // Variables
 $modal_background_color: white;
 $backdrop_color: rgba(0, 0, 0, 0.2);
@@ -145,322 +144,3 @@ $active_btn_text_color: #fff;
     }
   }
 }
-
-//modalv2 css
-// Colors
-$white: var(--_white);
-$black: var(--base-black);
-$gray-100: #f9fafb;
-$gray-300: #e5e7eb;
-$gray-400: #ccc;
-$gray-600: #737373;
-$gray-700: #6b7280;
-$gray-800: #444;
-$gray-900: #111827;
-
-$primary: var(--_primary-400);
-$primary-hover: var(--_primary-500);
-$text-dark: #222;
-$text-medium: #374151;
-$text-light: #666;
-
-// Typography
-$font-base: "Segoe UI", sans-serif;
-$font-size-base: 14px;
-$font-size-sm: 12px;
-$font-size-md: 15px;
-$font-size-lg: 18px;
-
-// Spacing & Sizes
-$radius: 6px;
-$radius-lg: 8px;
-$input-height: 32px;
-$input-padding: 10px 12px;
-
-// Z-Index
-$z-index-modal: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
-$z-index-backdrop: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 11);
-$z-index-wrapper: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 9);
-$z-index-minimized: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 12);
-$z-index-min-cart: calc(
-  var(--_higher-zIndex) + var(--_cs-et-zIndex) + 13
-); // Higher z-index for min cart
-
-// Shadows
-$shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
-
-.modalV2-main {
-  .modalV2-wrapper {
-    position: fixed;
-    bottom: 5%;
-    left: 50%;
-    transform: translate(-50%, 0%);
-    transition:
-      all 0.4s ease-in-out,
-      transform 0.4s ease-in-out;
-    background: $white;
-    border-radius: $radius-lg;
-    padding: 20px;
-    width: 850px;
-    font-family: $font-base;
-    box-shadow: $shadow-md;
-    z-index: $z-index-wrapper;
-    max-height: 70vh;
-    overflow: scroll;
-    display: flex;
-    flex-direction: column;
-
-    &.fullscreen {
-      transition:
-        all 0.5s ease-in-out,
-        transform 0.5s ease-in-out;
-      top: 50%;
-      left: 50%;
-      width: 95vw;
-      height: 95vh;
-      border-radius: $radius-lg;
-      transform: translate(-50%, -50%);
-      padding: 24px 32px;
-      box-shadow: none;
-      z-index: $z-index-modal;
-      display: flex;
-      flex-direction: column;
-      max-height: 100vh;
-
-      .product-list {
-        flex: 1;
-        overflow-y: auto;
-        margin-top: 24px;
-      }
-
-      .footer-bar {
-        border-top: 1px solid $gray-300;
-        padding-top: 16px;
-        margin-top: 24px;
-      }
-    }
-
-    .top-bar {
-      position: sticky;
-      top: 0;
-      background: $white;
-      z-index: 1;
-      padding-bottom: 12px;
-      .title-bar {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 16px;
-
-        .left-col {
-          display: flex;
-          gap: 10px;
-          align-items: center;
-        }
-
-        .title {
-          font-size: $font-size-lg;
-          font-weight: 600;
-          display: flex;
-          align-items: center;
-          gap: 8px;
-
-          .count {
-            font-weight: 700;
-            color: $gray-600;
-            background-color: #f2f4f7;
-            border-radius: 50%;
-            font-size: $font-size-sm;
-            width: 25px;
-            height: 25px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-        }
-
-        .actions span {
-          margin-left: 14px;
-          cursor: pointer;
-          font-size: 16px;
-          color: $text-light;
-          transition: color 0.2s;
-
-          &:hover {
-            color: $black;
-          }
-        }
-      }
-
-      .input-group {
-        display: flex;
-        gap: 12px;
-
-        .qty-input {
-          padding: $input-padding;
-          border: 1px solid $gray-400;
-          border-radius: $radius;
-          font-size: $font-size-base;
-          transition: border 0.2s;
-          width: 120px;
-
-          &:focus {
-            border-color: $primary;
-            outline: none;
-          }
-        }
-
-        .or-text {
-          align-self: center;
-          font-weight: 600;
-          color: $gray-800;
-          font-size: $font-size-base;
-        }
-
-        .add-btn {
-          background-color: $primary;
-          color: $white;
-          padding: 10px 16px;
-          border-radius: $radius;
-          font-weight: 600;
-          font-size: $font-size-base;
-          cursor: pointer;
-          transition: background-color 0.2s;
-
-          &:hover {
-            background-color: $primary-hover;
-          }
-        }
-      }
-    }
-
-    .footer-bar {
-      position: sticky;
-      bottom: 0;
-      display: flex;
-      justify-content: space-between;
-      padding-top: 16px;
-      border-top: 1px solid $gray-300;
-      margin-top: 24px;
-      font-size: $font-size-base;
-
-      .summary span {
-        margin-right: 18px;
-        font-weight: 500;
-        color: $text-medium;
-      }
-
-      .footer-actions {
-        display: flex;
-        gap: 10px;
-
-        .cancel-btn {
-          border-radius: $radius;
-          padding: 10px 14px;
-          font-weight: 500;
-          font-size: $font-size-base;
-          color: #333;
-          cursor: pointer;
-          transition: background 0.2s;
-
-          &:hover {
-            background: $gray-300;
-          }
-        }
-
-        .cart-btn {
-          background: $primary;
-          color: $white;
-          border-radius: $radius;
-          padding: 10px 20px;
-          font-weight: 600;
-          font-size: $font-size-base;
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          cursor: pointer;
-          transition: background 0.2s;
-
-          &:hover {
-            background: $primary-hover;
-          }
-        }
-      }
-    }
-  }
-
-  .modalV2-backdrop {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.4);
-    z-index: $z-index-backdrop;
-  }
-
-  .modalV2-min {
-    position: fixed;
-    transition:
-      all 0.4s ease-in-out,
-      transform 0.4s ease-in-out;
-    right: 20px;
-    bottom: 20px;
-    padding: 0; /* Remove padding from the main min container */
-    border-radius: $radius;
-    box-shadow: $shadow-md;
-    z-index: $z-index-minimized;
-    display: none;
-    flex-direction: row; /* Align items in a row */
-    align-items: center;
-    gap: 10px; /* Adjust gap between elements */
-    font-size: $font-size-base;
-    background-color: transparent; /* Make the main container transparent */
-
-    .min-toolbar {
-      background-color: $white;
-      display: flex;
-      align-items: center; /* Align items vertically in the toolbar */
-      padding: 12px 16px; /* Add padding to the toolbar */
-      border-radius: $radius 0 0 $radius; /* Rounded left corners */
-      gap: 16px;
-    }
-
-    &.active {
-      display: flex;
-    }
-
-    .cart-btn {
-      background: $primary;
-      color: $white;
-      border: none; /* Remove border */
-      border-radius: 0 $radius $radius 0; /* Rounded right corners */
-      padding: 12px 16px;
-      font-weight: 600;
-      font-size: $font-size-sm;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      cursor: pointer;
-      transition: background 0.2s;
-      z-index: $z-index-min-cart;
-
-      &:hover {
-        background: $primary-hover;
-      }
-    }
-
-    .actions {
-      display: flex;
-      gap: 8px;
-
-      span {
-        cursor: pointer;
-        font-size: 16px;
-        color: $text-light;
-        transition: color 0.2s;
-
-        &:hover {
-          color: $black;
-        }
-      }
-    }
-  }
-}