@nulllogic/scssleon 1.0.39 → 1.1.0

package/scss/themes/_default.scss

@@ -1,7 +1,10 @@
 @use 'sass:map';
 @use "sass:string";
+@use '../functions' as functions;
 
-// Main theme colors
+$config: () !default;
+
+// Main theme _colors
 $theme: () !default;
 $updated-theme: () !default;
 
@@ -14,7 +17,6 @@ $html-config: (
   ),
 
   html : (
-
     body : (
       -webkit-text-size-adjust: 100%,
       -webkit-font-smoothing: antialiased,
@@ -31,70 +33,121 @@ $html-config: (
       color: var(--color),
       background: var(--background),
 
-      colors: (
+      _colors: (
         light : (
-          background: '#fff',
+          background: rgb(244, 245, 250) linear-gradient(to top, #ffffff, #fefefe, #f3f2f8, #f3f4f9, #f4f5fa),
           color: '#ccc',
         ),
         dark : (
           background : rgba(18, 20, 23, 1),
           color: '#ccc'
         )
+      ),
+
+      _subclasses : (
+        '&[scroll-lock]' : (
+          overflow: hidden
+        )
       )
     ),
 
     a : (
-      text-decoration : underline,
+      text-decoration : none,
       color: var(--color),
 
-      colors: (
+      _colors: (
         light : (
-          color: '#ccc',
+          color: '#333',
         ),
         dark : (
           color: '#ccc'
         )
       ),
 
-      subclasses : (
-        "&:hover": (
+      _subclasses : (
+        '&:hover': (
           text-decoration: none
         ),
-        "&[target='_blank']" : (
-          subclasses : (
-            "&:after" : (
-              background: red,
-              display: inline-flex,
-              width: 12px,
-              height: 12px,
-              content : ''
-            )
-          ),
-        )
       )
 
     ),
     ol: (
       margin: 0,
       padding: 0,
-      list-style-type: none,
+      //list-style-type: none,
     ),
     ul: (
       margin: 0,
       padding: 0,
-      list-style-type: none,
+      //list-style-type: none,
     ),
     dl: (
       margin: 0,
       padding: 0,
-      list-style-type: none,
+      //list-style-type: none,
     ),
     img : (
       vertical-align: middle,
       width: auto,
       height: auto,
       max-width: 100%,
-    )
+    ),
+
+    code : (
+
+      //margin-block: -.125rem,
+      //padding: .125rem .375rem,
+
+      color: var(--color),
+      background: var(--background),
+
+      _colors: (
+        light : (
+          background: rgba(228, 221, 83, 0.65),
+          color: inherit,
+        ),
+        dark : (
+          background : oklch(0.63 0.14 106.66 / 0.54),
+          color: inherit,
+        )
+      ),
+    ),
+
+    kbd: (
+      font-family: var(global(--font-family-monospace)),
+
+      margin-block: -.125rem,
+      padding: .125rem .375rem,
+
+      border: var(--border),
+      background: var(--background),
+      color: var(--color),
+
+      //font-size: 11px,
+      //color: #4e4e4e,
+      //text-shadow: none,
+      //background-color: #f7f7f7,
+      //padding: 4px 7px,
+      //border: 1px solid rgba(0,0,0,0.2),
+      //border-radius: 7px,
+      //box-shadow: 0 2px 0 0 rgba(0,0,0,0.2), 0 0 0 1px #fafafa inset,
+      //margin: 0 1px,
+
+      _colors: (
+        light : (
+          background: rgb(255, 255, 255),
+          color: inherit,
+          border: 1px solid rgba(19, 19, 19, 0.2),
+          shadow: string.unquote(' rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px'),
+        ),
+        dark : (
+          background : oklch(.205 0 0),
+          color: inherit,
+          border: 1px solid rgba(19, 19, 19, 0.2),
+          shadow: string.unquote(' rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px'),
+        )
+      )
+    ),
   )
 );
 
@@ -102,44 +155,52 @@ $updated-theme: map.deep-merge($updated-theme, $html-config);
 
 $content-config: (
   content : (
+    a : (
+      text-decoration: underline,
+      _subclasses : (
+        '&:hover' : (
+          text-decoration: none,
+        )
+      )
+    ),
     h1 : (
-      font-size: 3.75rem,
+      font-size: clamp(2.0273rem, 1.8053rem + 0.8833vw, 2.5341rem),
       line-height: 1,
       font-weight: 500,
       margin: 0,
       padding: 0 0 15px 0
     ),
     h2 : (
-      font-size: 3rem,
+      font-size: clamp(1.802rem, 1.7034rem + 0.3926vw, 2.0273rem),
       line-height: 1,
       font-weight: 500,
       margin: 0,
       padding: 0 0 15px 0
     ),
     h3 : (
-      font-size: 2.25rem,
-      line-height: 1.3,
+      font-size: clamp(1.6018rem, 1.5141rem + 0.349vw, 1.802rem),
+      line-height: 1,
       font-weight: 500,
       margin: 0,
       padding: 0 0 15px 0
     ),
     h4 : (
-      font-size: 1.875rem,
-      line-height: 1.2,
+      font-size: clamp(1.4238rem, 1.3459rem + 0.3102vw, 1.6018rem),
+      line-height: 1,
       font-weight: 500,
       margin: 0,
       padding: 0 0 15px 0
     ),
     h5 : (
-      font-size: 1.5rem,
-      line-height: 1.4,
+      font-size: clamp(1.2656rem, 1.1963rem + 0.2757vw, 1.4238rem),
+      line-height: 1,
       font-weight: 500,
       margin: 0,
       padding: 0 0 15px 0
     ),
     h6 : (
-      font-size: 1.25rem,
-      line-height: 1.5,
+      font-size: clamp(1.125rem, 1.0634rem + 0.2451vw, 1.2656rem),
+      line-height: 1,
       font-weight: 500,
       margin: 0,
       padding: 0 0 15px 0
@@ -147,7 +208,31 @@ $content-config: (
     p : (
       margin: 0,
       padding: 0 0 15px 0,
+      line-height: clamp(1.5rem, calc(1rem * pow(1.618, 1)), 1.618rem),
+    ),
+    blockquote: (
+      margin: 0px 0px 15px,
       line-height: clamp(1.25em, 4vw, 1.5em),
+      padding: 1rem,
+      font-style: italic,
+
+      border-left: var(--blockquote-border),
+
+      _colors: (
+        light: (
+          blockquote-border: 3px solid #939393,
+          //blockquote-background: rgba(0, 0, 0, 0.65),
+        ),
+        dark: (
+          blockquote-border: 3px solid #ccc,
+          //blockquote-background: rgba(0, 0, 0, 0.65),
+        )
+      ),
+      _subclasses : (
+        cite : (
+
+        )
+      )
     ),
     abbr: (
       attributes : (
@@ -162,12 +247,32 @@ $content-config: (
     ),
     ol: (
       margin-bottom: 15px,
+      line-height: clamp(1.25em, 4vw, 1.5em),
+      //list-style-type: attr(type),
+      margin-left: 1rem,
+      _subclasses : (
+        '& ol': (
+          //list-style-type: attr(type),
+          margin-bottom: 0.5rem,
+          margin-inline-start: 1rem,
+        )
+      )
     ),
     ul: (
-      margin-bottom: 15px,
+      margin-bottom: 0.5rem,
+      margin-inline-start: 1rem,
+      line-height: clamp(1.25em, 4vw, 1.5em),
+      list-style-type: inherit,
+      _subclasses : (
+        '& ul': (
+          margin-bottom: 0.5rem,
+          margin-inline-start: 1rem,
+        )
+      )
     ),
     dl: (
       margin-bottom: 15px,
+      line-height: clamp(1.25em, 4vw, 1.5em),
     ),
     dt: (
       font-weight: normal,
@@ -199,24 +304,18 @@ $content-config: (
     ),
     pre: (
       font-family: var(global(--font-family-monospace)),
-    ),
-    code: (
-      color: var(--color),
-      background: var(--background),
-      padding: 2px 5px,
-      colors: (
-        light : (
-          background: '#fff',
-          color: '#ccc',
-        ),
-        dark : (
-          background : rgba(38, 69, 116, 1),
-          color: '#fff'
+      margin-block: -.125rem,
+      padding: .575rem .375rem,
+      margin: 0 0 15px 0,
+      line-height: 1.1,
+      display: block,
+      border-radius: 0.5rem,
+      _subclasses : (
+        code : (
+          background: none,
         )
       )
     ),
-    kbd: (
-    ),
     figure: (
       margin: 0 0 15px 0,
     ),
@@ -282,7 +381,7 @@ $content-config: (
       border-top-width: 1px,
       border-top-style: solid,
       border-top-color: var(--border-top-color),
-      colors: (
+      _colors: (
         light: (
           border-top-color: #ccc
         ),
@@ -290,7 +389,7 @@ $content-config: (
           border-top-color: #555
         )
       )
-    )
+    ),
   )
 );
 
@@ -298,23 +397,21 @@ $updated-theme: map.deep-merge($updated-theme, $content-config);
 
 $components-config: (
   components: (
+
     alert: (
 
       --border-radius: .5rem,
-      --grid-template-columns: auto auto 1fr,
+      --grid-template-columns: 20px auto 30px,
       --gap : 0.5rem,
       --padding: 0.825rem,
-      --left-column-justify-self: start,
-      --left-column-align-self: start,
-      --center-column-justify-self: center,
-      --center-column-align-self: center,
-      --right-column-justify-self: end,
-      --right-column-align-self: start,
 
-      box-shadow: var(--shadow),
       background: var(--background),
       border-radius: var(--border-radius),
       border: var(--border),
+      grid-template-columns: var(--grid-template-columns),
+      grid-gap: var(--gap),
+      padding: var(--padding),
+
       outline: 1px solid transparent,
       position: relative,
       display: grid,
@@ -322,46 +419,33 @@ $components-config: (
       max-width: 100%,
       align-items: center,
       line-height: 1rem,
-      grid-template-columns: var(--grid-template-columns),
-      grid-gap: var(--gap),
-      padding: var(--padding),
 
-      colors: (
+      _colors: (
         light : (
           background: rgba(246, 246, 247, 1),
-          shadow: string.unquote("inset 0 0.0625rem 0 0 rgba(186, 191, 195, 1), inset 0 0 0 0.0625rem rgba(186, 191, 195, 1)"),
+          border: 1px solid rgb(219, 219, 219),
         ),
         dark : (
           background: rgb(18, 18, 24),
           border: 1px solid rgba(48, 54, 61, 0.75),
-          shadow: string.unquote("rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"),
         )
       ),
 
-      subclasses : (
-        '.left' : (
-          justify-self: var(--left-column-justify-self),
-          align-self: var(--left-column-align-self),
-        ),
-        '.center' : (
-          justify-self: var(--center-column-justify-self),
-          align-self: var(--center-column-align-self),
-        ),
-        '.right' : (
-          justify-self: var(--right-column-justify-self),
-          align-self: var(--right-column-align-self),
-        ),
-      )
-
     ),
+
     accordion : (
 
       --border-radius: .25rem,
-      --padding: 1rem,
+      --padding: 0.5rem,
+      --item-padding: 0 0 .5rem 0,
 
+      border-radius: var(--border-radius),
       position: relative,
       width: 100%,
-      colors: (
+
+      padding: var(--padding),
+
+      _colors: (
         light : (
         ),
         dark : (
@@ -369,16 +453,20 @@ $components-config: (
           background: rgb(46, 56, 66),
         )
       ),
-      subclasses : (
+
+      _subclasses : (
 
         '.item' : (
-          padding-bottom: var(--padding),
+          padding: var(--item-padding),
+
+          _subclasses : (
+            '.question' : (
 
-          subclasses : (
-            '.title' : (
               display: flex,
-              padding-bottom: var(--padding),
-              subclasses : (
+              border-bottom: 1px solid #ccc,
+              justify-content: space-between,
+
+              _subclasses : (
                 '> button' : (
                   color: inherit,
                   background: none,
@@ -389,31 +477,63 @@ $components-config: (
                   font-size: inherit,
                   width: 100%,
                   align-items: center,
-                  justify-content: space-between,
-                  border-bottom: 1px solid #ccc,
-                  subclasses : (
-                    '.left' : (
-                      justify-self: var(--left-column-alignment),
-                    ),
-                    '.center' : (
-                      justify-self: var(--center-column-alignment),
-                    ),
-                    '.right' : (
-                      justify-self: var(--right-column-alignment)
+                  justify-content: space-between
+                ),
+
+                '&.open' : (
+                  _subclasses : (
+                    '.icon' : (
+                      transform: rotate(180deg)
                     )
                   )
+                ),
+                '.icon' : (
+
+                )
+              )
+            ),
+
+            '.answer' : (
+
+              display: block,
+              padding: 0.5rem 0,
+              height: auto,
+              opacity: 1,
+
+              transition: string.unquote('opacity 0.15s ease-in, display 0.15s ease-in allow-discrete'),
+
+              _subclasses : (
+                '&[hidden]' : (
+                  display: none,
+                  opacity: 0,
+                  transition: string.unquote('opacity 0.15s ease-out, display 0.15s ease-out allow-discrete'),
                 )
               )
             ),
-            '.content' : (
+
+            '&:last-child' : (
+              padding-bottom: 0,
+            ),
+
+            // Avoid running animation onload and add animation, when user hover the element
+            // @TODO Add focus later, when user navigate by keyboard
+            '&:hover .answer' : (
+              _atrule : (
+                '@starting-style' : (
+                  opacity: 0
+                )
+              ),
             )
           )
         )
       )
     ),
+
     badge : (
+
       --border-radius: .25rem,
       --padding: .125rem .625rem,
+
       font-size: .75rem,
       line-height: 1rem,
       font-weight: 500,
@@ -421,58 +541,59 @@ $components-config: (
       vertical-align: middle,
       align-items: center,
       display: inline-flex,
+
       padding: var(--padding),
       border-radius: var(--border-radius),
-      color: var(--color),
       background: var(--background),
       box-shadow: var(--box-shadow),
       border: var(--border),
-      colors: (
+
+      _colors: (
         light : (
-          color: #ccc,
-          box-shadow: none
+          box-shadow: none,
+          border: 1px solid rgba(33, 33, 33, 0.15),
+          background: rgba(247, 247, 247, 0.85),
         ),
         dark : (
-          color: #ccc,
-          background: rgb(40, 50, 60),
+          background: rgba(40, 50, 60, 0.85),
           box-shadow: none,
-          border: 1px solid #ccc,
+          border: 1px solid rgba(255, 255, 255, 0.15),
         )
       )
     ),
+
     breadcrumb : (
-      --padding: 0 0 0 5px,
+
       list-style: none,
       align-items: center,
       display: flex,
       flex-wrap: wrap,
-      padding: var(--padding),
+
       margin: 0,
-      colors: (
+
+      _colors: (
         light : (
         ),
         dark : (
         )
       ),
-      subclasses : (
-        ".item" : (
+
+      _subclasses : (
+        '.item' : (
           display: inline-flex,
-          subclasses : (
-            ".link" : (
+          _subclasses : (
+            '.link' : (
             )
           )
         )
       )
     ),
+
     button : (
+
       --padding: .5rem .75rem,
       --border-radius: .25rem,
-      --box-shadow : (
-        inset 0 0 0 1px rgba(0, 0, 0, 0.05),
-        inset 0 1px 2px 0 rgba(78, 83, 90, 0.1) //   inset -0.0625rem 0 0 #e3e3e3,
-        //   inset 0.0625rem 0 0 #e3e3e3,
-        //   inset 0 0.0625rem 0 #e3e3e3
-      ),
+
       display: inline-flex,
       align-items: center,
       align-content: center,
@@ -486,18 +607,34 @@ $components-config: (
       background: var(--background),
       color: var(--color),
       border-radius: var(--border-radius),
+      box-shadow: var(--box-shadow),
       // This one is required for button group use
       position: relative,
+
       transition: (
         color .15s ease-in-out,
         background-color .15s ease-in-out,
         border-color .15s ease-in-out,
         box-shadow .15s ease-in-out
       ),
-      colors: (
+
+      _colors: (
         light: (
-          color: #fff,
-          background: #fff
+          // Default
+          color: inherit,
+          background: rgb(250, 250, 250),
+          border: 1px solid rgb(188, 188, 188),
+          // Hover state
+          hover-color: inherit,
+          hover-background: rgb(235, 235, 235),
+          hover-border: 1px solid rgb(180, 180, 180),
+          // Active state
+          active-color: inherit,
+          active-background: rgb(235, 235, 235),
+          active-border: 1px solid rgb(180, 180, 180),
+          active-shadow: string.unquote('-0.0625rem 0rem 0.0625rem 0rem rgba(33,33,33,.1) inset,0.0625rem 0rem 0.0625rem 0rem rgba(3,33,33,.15) inset,0rem 0.125rem 0.0625rem 0rem rgba(44,44,44,0.15) inset'),
+          // Focus
+          focus : 0 0 0 0.2rem rgba(98, 175, 97, .5),
         ),
         dark: (
           // Default
@@ -508,81 +645,115 @@ $components-config: (
           hover-color: #fff,
           hover-background: rgb(59, 68, 81),
           hover-border: 1px solid rgba(229, 235, 240, .55),
-          // Disabled state
-          disabled-color: #484f58,
-          disabled-background: #21262d,
-          disabled-border: 1px solid rgba(240, 246, 252, 0.1),
           // Active state
           active-color: #fff,
           active-background: rgb(39, 45, 53),
           active-border: 1px solid rgba(240, 246, 252, .25),
-          active-shadow: string.unquote("-0.0625rem 0rem 0.0625rem 0rem rgba(26,26,26,0.122) inset,0.0625rem 0rem 0.0625rem 0rem rgba(26,26,26,0.122) inset, 0rem 0.125rem 0.0625rem 0rem rgba(26,26,26,0.2) inset")
+          active-shadow: string.unquote('-0.0625rem 0rem 0.0625rem 0rem rgba(15,15,15,.35) inset,0.0625rem 0rem 0.0625rem 0rem rgba(13,13,13, .35) inset,0rem 0.125rem 0.0625rem 0rem rgba(15,15,15,0.35) inset'),
+          // Focus
+          focus : 0 0 0 0.2rem rgba(98, 175, 97, .5),
         )
       ),
-      subclasses : (
-        "&:hover:not(.loading, [disabled], .btn-link)" : (
+
+      _subclasses : (
+        '&:focus-visible:not([disabled])' : (
+          outline: none,
+          box-shadow: var(--focus)
+        ),
+        '&:hover:not(.loading, [disabled], .link, .blank)' : (
           color: var(--hover-color),
           background: var(--hover-background),
           border: var(--hover-border),
         ),
-        "&:active:not(.loading, [disabled], .btn-link)" : (
+        '&:active:not(.loading, [disabled], .link, .blank)' : (
           color: var(--active-color),
           background: var(--active-background),
           border: var(--active-border),
           box-shadow: var(--active-shadow),
         ),
-        "&.btn-link" : (
+
+        '&.link' : (
+          display: inline-flex,
+          align-items: center,
           background: transparent,
+          padding: var(--padding),
           border: none,
           box-shadow: none,
           text-decoration: underline,
-          subclasses: (
-            "&:hover": (
+          _subclasses: (
+            '&:hover': (
               text-decoration: none,
             )
           )
         ),
-        "&.loading" : (
+
+        '&.blank' : (
+          display: inline-flex,
+          align-items: center,
+          padding: 0,
+          border: none,
+          box-shadow: none,
+          background: transparent,
+          text-decoration: none,
+        ),
+
+        '&.loading' : (
           cursor: wait,
         ),
-        "&.btn[disabled]" : (
+
+        '&[disabled]' : (
           cursor: not-allowed,
-          color: var(--disabled-color),
-          background: var(--disabled-background),
-          border: var(--disabled-border),
+
+          color: var(--color),
+          background: var(--background),
+          border: var(--border),
           box-shadow: none,
+
+          _colors: (
+              light: (
+                color: rgba(28, 29, 31, 0.5),
+                background: rgb(235, 235, 235),
+                border: 1px solid rgb(188, 188, 188),
+              ),
+              dark: (
+                  color: inherit,
+                  background: #21262d,
+                  border: 1px solid rgba(240, 246, 252, 0.1),
+              )
+          )
         )
       )
     ),
+
     button-group: (
       --gap: 10px,
       display: flex,
       flex-wrap: wrap,
-      subclasses : (
-        ".btn:first-child" : (
+      _subclasses : (
+        '.btn:first-child' : (
           border-start-end-radius: 0,
           border-end-end-radius: 0,
         ),
-        ".btn:last-child" : (
+        '.btn:last-child' : (
           border-start-start-radius: 0,
           border-end-start-radius: 0,
         ),
-        ".btn:not(:first-child)" : (
+        '.btn:not(:first-child)' : (
           margin-left: - 1px
         ),
-        ".btn:not(:first-child, :last-child)" : (
+        '.btn:not(:first-child, :last-child)' : (
           border-radius: 0
         ),
-        ".btn:only-child" : (
+        '.btn:only-child' : (
         ),
-        ".btn:hover, .btn:focus" : (
+        '.btn:hover, .btn:focus' : (
           z-index: 1
         ),
-        "&.separated" : (
+        '&.separated' : (
           gap: var(--gap),
           --border-radius: 5px,
-          subclasses : (
-            ".btn" : (
+          _subclasses : (
+            '.btn' : (
               margin: 0,
               border-radius: var(--border-radius)
             )
@@ -590,133 +761,666 @@ $components-config: (
         )
       )
     ),
+
+    dropdown: (
+
+      position: relative,
+      display: inline-block,
+
+      z-index: functions.get-config($config, 'z-index.dropdown'),
+
+      _colors: (
+        light : (
+          background: rgba(246, 246, 247, 1),
+          border: 1px solid rgb(219, 219, 219),
+          shadow: string.unquote('rgba(37, 41, 46, 0.04) 0px 6px 12px -3px, rgba(37, 41, 46, 0.12) 0px 6px 18px 0px'),
+        ),
+        dark : (
+          background: rgb(18, 18, 24),
+          border: 1px solid rgba(48, 54, 61, 0.75),
+          shadow: string.unquote('rgba(37, 41, 46, 0.04) 0px 6px 12px -3px, rgba(37, 41, 46, 0.12) 0px 6px 18px 0px'),
+        )
+      ),
+
+      _subclasses : (
+        '&.on-hover:hover' : (
+            _subclasses : (
+              '& > .dropdown' : (
+                display: block,
+                opacity: 1,
+                transform: translateY(0),
+
+                _atrule : (
+                    '@starting-style' : (
+                        opacity: 0,
+                        transform: translateY(-5px)
+                    )
+                ),
+              )
+            )
+        ),
+
+        '.dropdown' : (
+
+          display: none,
+          position: absolute,
+          top: 100%,
+          left: 0,
+          border-radius: 0.25rem,
+          padding: .5rem,
+          width: 200px,
+          height: auto,
+
+          border: var(--border),
+          background: var(--background),
+          box-shadow: var(--shadow),
+
+          transition: string.unquote('opacity 0.15s ease-in, transform 0.15s ease-in, display 0.15s ease-in allow-discrete'),
+          transform: translateY(-5px),
+          opacity: 0,
+
+          _subclasses : (
+            '&:before': (
+              content: ' ',
+              left: 0,
+              top: -5px,
+              height: 5px,
+              width: 100%,
+              display: block,
+              position: absolute,
+            ),
+            '&.to-right' : (
+              top: 0,
+              left: 100%,
+            )
+          )
+        )
+      )
+    ),
+
     card : (
-      --border-radius: .25rem,
-      --padding: .5rem,
+
+      --border-radius: .5rem,
+      --padding: .825rem,
+
       background: var(--background),
       padding: var(--padding),
       border-radius: var(--border-radius),
       box-shadow: var(--shadow),
       border: var(--border),
+
       height: 100%,
       margin: 0,
-      colors: (
+
+      _colors: (
         light : (
-          background: rgb(200, 200, 200)
+          background: rgb(250, 250, 250),
+          border : 1px solid rgb(219, 219, 219),
+          shadow: string.unquote('0 4px 12px rgba(224,224,224,0.5)')
         ),
         dark : (
-          border: 1px solid rgba(48, 54, 61, .75),
+          border: 1px solid #3d444d,
           background: rgb(22, 27, 34),
           shadow: rgba(1, 4, 9, 0.4) 0 1px 0 0
         )
       )
     ),
+
     container : (
       margin: 0 auto,
       width: 100%,
-      colors: (
-        light : (),
-        dark : ()
-      ),
     ),
+
     form : (
-      label : (
-        display: block,
-        margin-bottom: 10px,
-      ),
-      input : (
-        --border-radius: .25rem,
-        --padding: .5rem .75rem,
-        display: block,
-        colors: (
-          light : (
-          ),
-          dark : (
-            color: #fff,
-            background: rgb(48, 56, 66),
-            border: 1px solid rgba(240, 246, 252, .25),
-          )
-        )
-      ),
-      select : (
-        --border-radius: .25rem,
-        --padding: .5rem .75rem,
-        display: block,
-        colors: (
-          light : (
-          ),
-          dark : (
-            color: #fff,
-            background: rgb(48, 56, 66),
-            border: 1px solid rgba(240, 246, 252, .25),
-          )
-        )
-      ),
-      checkbox : (
-        --border-radius: .25rem,
-        --padding: .5rem .75rem,
-        colors: (
-          light : (
-          ),
-          dark : (
-            color: #fff,
-            background: rgb(48, 56, 66),
-            border: 1px solid rgba(240, 246, 252, .25),
-          )
-        )
-      ),
-      radio : (
-        --border-radius: .25rem,
-        --padding: .5rem .75rem,
-        colors: (
-          light : (
-          ),
-          dark : (
-            color: #fff,
-            background: rgb(48, 56, 66),
-            border: 1px solid rgba(240, 246, 252, .25),
-          )
+
+      _colors: (
+        light : (
+          caret-color: oklch(0.442 0.143 142.163),
+          box-shadow-focus: 0 0 0 .25rem rgba(13, 110, 253, .25),
+        ),
+        dark : (
+          caret-color: oklch(0.442 0.143 142.163),
+          box-shadow-focus: 0 0 0 .25rem rgba(13, 110, 253, .25),
         )
       ),
-      validation : (
-      )
-    ),
-    table : (
-      width: 100%,
-    ),
 
-    overlay : (
+      _subclasses : (
+        '.field' : (
+          margin-bottom: 1rem,
 
-      background : var(--background),
+          _subclasses : (
+            '.inline' : (
+              display: inline-flex,
+              gap: .5rem,
+            ),
+            '&.is-invalid' : (
+              _subclasses : (
+                '.input, .textarea, .select' : (
+                  border: 1px solid oklch(0.535 0.213 27.297),
+                  margin-bottom: 10px,
+                  background: var(--xii-form-background) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='oklch(0.535 0.213 27.297)'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") no-repeat calc(100% - 9px) 50% / 16px 16px,
+                ),
+                '.invalid-feedback' : (
+                  display: block,
+                )
+              )
+            ),
+            '.invalid-feedback' : (
+              display: none,
+              color: oklch(0.535 0.213 27.297),
+              font-size: 0.825rem,
+            ),
 
-      position: absolute,
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
+            '.note' : (
+              color : oklch(55.1% .027 264.364),
+            )
+          )
+        ),
 
-      width: 100%,
-      height: 100%,
+        '.label' : (
+            display: block,
+            margin-bottom: 10px,
+        ),
 
-      display: flex,
-      align-items: center,
-      justify-content: center,
+        '.input' : (
+
+          --border-radius: .25rem,
+          --padding: .5rem .75rem,
+
+          font-size: inherit,
+          font-weight: inherit,
+          display: block,
+
+          appearance: none,
+          outline: none,
+
+          padding: var(--padding),
+          border-radius: var(--border-radius),
+          border: var(--border),
+          caret-color: var(--caret-color),
+
+          width: 100%,
+
+          transition: box-shadow .15s ease-in-out,
+
+          _colors: (
+            light : (
+              color: inherit,
+              background: rgb(250, 250, 250),
+              border: 1px solid rgb(219, 219, 219),
+              focus-shadow: 0 0 0 0.2rem rgba(98, 175, 97, .5),
+              focus-border: 1px solid oklch(0.69 0.18 142.52),
+            ),
+            dark : (
+              color: #fff,
+              background: rgb(48, 56, 66),
+              border: 1px solid rgba(240, 246, 252, .25),
+              focus-shadow: 0 0 0 0.2rem rgba(98, 175, 97, .5),
+              focus-border: 1px solid oklch(0.69 0.18 142.52),
+            )
+          ),
+
+          _subclasses : (
+            '&:focus-visible, &:focus' : (
+              box-shadow: var(--focus-shadow),
+              border: var(--focus-border),
+            )
+          )
+        ),
+
+        '.textarea' : (
+
+          --border-radius: .25rem,
+          --padding: .5rem .75rem,
+
+          font-size: inherit,
+          font-weight: inherit,
+          font-family: inherit,
+
+          display: block,
+
+          appearance: none,
+          outline: none,
+
+          padding: var(--padding),
+          border-radius: var(--border-radius),
+          border: var(--border),
+          caret-color: var(--caret-color),
+
+          width: 100%,
+
+          transition: box-shadow .15s ease-in-out,
+
+          _colors: (
+            light : (
+              color: inherit,
+              background: rgb(250, 250, 250),
+              border: 1px solid rgb(219, 219, 219),
+              focus-shadow: 0 0 0 0.2rem rgba(98, 175, 97, .5),
+              focus-border: 1px solid oklch(0.69 0.18 142.52),
+            ),
+            dark : (
+              color: #fff,
+              background: rgb(48, 56, 66),
+              border: 1px solid rgba(240, 246, 252, .25),
+              focus-shadow: 0 0 0 0.2rem rgba(98, 175, 97, .5),
+              focus-border: 1px solid oklch(0.69 0.18 142.52),
+            )
+          ),
+
+          _subclasses : (
+            '&:focus-visible, &:focus' : (
+              box-shadow: var(--focus-shadow),
+              border: var(--focus-border),
+            )
+          )
+        ),
+
+        '.select' : (
+
+          --border-radius: .25rem,
+          --padding: .5rem .75rem,
+
+          font-size: inherit,
+          font-weight: inherit,
+          display: block,
+
+          appearance: none,
+          outline: none,
+
+          padding: var(--padding),
+          border-radius: var(--border-radius),
+          border: var(--border),
+
+          width: 100%,
+
+          transition: box-shadow .15s ease-in-out,
+
+          _colors: (
+            light : (
+              color: inherit,
+              background: rgb(250, 250, 250),
+              border: 1px solid rgb(219, 219, 219),
+              focus-shadow: 0 0 0 0.2rem rgba(98, 175, 97, .5),
+              focus-border: 1px solid oklch(0.69 0.18 142.52),
+            ),
+            dark : (
+              color: #fff,
+              background: rgb(48, 56, 66),
+              border: 1px solid rgba(240, 246, 252, .25),
+              focus-shadow: 0 0 0 0.2rem rgba(98, 175, 97, .5),
+              focus-border: 1px solid oklch(0.69 0.18 142.52),
+            )
+          ),
+
+          _subclasses : (
+            '&:focus-visible, &:focus' : (
+              box-shadow: var(--focus-shadow),
+              border: var(--focus-border),
+            )
+          )
+        ),
 
-      colors: (
+        '.checkbox' : (
+
+          --border-radius: .25rem,
+          --padding: .5rem .75rem,
+
+          //padding: var(--padding),
+          border-radius: var(--border-radius),
+          border: var(--border),
+          background: var(--background),
+          //box-shadow: var(--shadow),
+
+          width: 16px,
+          height: 16px,
+          appearance: none,
+          outline : none,
+
+          transition: box-shadow .15s ease-in-out,
+
+          _colors: (
+            light : (
+              background: rgba(250, 250, 250, .75),
+              border: 1px solid rgb(219, 219, 219),
+              //shadow: string.unquote('rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px ')
+              focus-shadow: 0 0 0 0.2rem rgba(98, 175, 97, .5),
+              focus-border: 1px solid oklch(0.69 0.18 142.52),
+            ),
+            dark : (
+              background: rgba(48, 56, 66, .85),
+              border: 1px solid rgb(74, 109, 71, .25),
+              //shadow: string.unquote('rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px ')
+              focus-shadow: 0 0 0 0.2rem rgba(98, 175, 97, .5),
+              focus-border: 1px solid oklch(0.69 0.18 142.52),
+            )
+          ),
+
+          _subclasses : (
+            '&:focus-visible, &:focus' : (
+              box-shadow: var(--focus-shadow),
+              border: var(--focus-border),
+            ),
+            '&:checked' : (
+              _colors: (
+                light : (
+                  background: rgb(74, 109, 71) string.unquote(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")),
+                  border: 1px solid rgba(11, 47, 10, .25),
+                ),
+                dark : (
+                  background: rgb(74, 109, 71) string.unquote(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")),
+                  border: 1px solid rgba(240, 246, 252, .25),
+                )
+              ),
+            ),
+            '&:indeterminate' : (
+              _colors: (
+                light : (
+                  border: 1px solid rgba(11, 47, 10, .25),
+                  background: rgb(74, 109, 71) string.unquote(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")),
+                ),
+                dark : (
+                  background: rgb(74, 109, 71) string.unquote(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")),
+                  border: 1px solid rgba(240, 246, 252, .25),
+                )
+              ),
+            )
+          )
+        ),
+
+        '.radio' : (
+
+          --border-radius: 50%,
+          --padding: .5rem .75rem,
+
+          border-radius: var(--border-radius),
+          border: var(--border),
+          background: var(--background),
+
+          width: 16px,
+          height: 16px,
+          appearance: none,
+          outline : none,
+
+          transition: string.unquote('box-shadow .15s ease-in-out'),
+
+          _colors: (
+            light : (
+              background: rgba(250, 250, 250, .75),
+              border: 1px solid rgb(219, 219, 219),
+              //shadow: string.unquote('rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px ')
+              focus-shadow: 0 0 0 0.2rem rgba(98, 175, 97, .5),
+              focus-border: 1px solid oklch(0.69 0.18 142.52),
+            ),
+            dark : (
+              background: rgba(48, 56, 66, .85),
+              border: 1px solid rgb(74, 109, 71, .25),
+              //shadow: string.unquote('rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px ')
+              focus-shadow: 0 0 0 0.2rem rgba(98, 175, 97, .5),
+              focus-border: 1px solid oklch(0.69 0.18 142.52),
+            )
+          ),
+
+          _subclasses : (
+            '&:focus-visible, &:focus' : (
+              box-shadow: var(--focus-shadow),
+              border: var(--focus-border),
+            ),
+            '&:checked' : (
+              _colors: (
+                light : (
+                  background: rgb(74, 109, 71) string.unquote(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")),
+                  border: 1px solid rgba(11, 47, 10, .25),
+                ),
+                dark : (
+                  background: rgb(74, 109, 71) string.unquote(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")),
+                  border: 1px solid rgba(240, 246, 252, .25),
+                )
+              ),
+            ),
+          )
+        ),
+
+        '.switcher' : (
+
+          _subclasses : (
+            // .qhs:is(:where(.qhq):has(:checked) *)
+            '&:has(:checked) .toggle' : (
+              background: rgb(74, 109, 71),
+              border: 1px solid rgba(11, 47, 10, 0.25),
+            ),
+            '.toggle' : (
+              background: var(--background),
+              border: var(--border),
+              border-radius: 1rem,
+              display: inline-flex,
+              position: relative,
+              width: 2.75rem,
+              height: 1.5rem,
+
+              _colors: (
+                light : (
+                  background: oklch(0.985 0 89.876),
+                  border: 1px solid rgb(219, 219, 219),
+                  focus-shadow: 0 0 0 0.2rem rgba(98, 175, 97, .5),
+                ),
+                dark : (
+                  background: rgba(48, 56, 66, 0.85),
+                  border: 1px solid rgba(74, 109, 71, 0.25),
+                  focus-shadow: 0 0 0 0.2rem rgba(98, 175, 97, .5),
+                )
+              ),
+
+              _subclasses : (
+                '.span' : (
+
+                  width: 1.25rem,
+                  //height: calc(100% - 2px),
+                  display: flex,
+                  align-items: center,
+                  justify-content: center,
+                  position: absolute,
+                  inset: 1px,
+
+                  border-radius: 50%,
+
+                  transition: transform .2s cubic-bezier(.4,0,.2,1),
+                  pointer-events: none,
+
+                  border: var(--switcher-border),
+                  background: var(--switcher-background),
+                  //box-shadow: string.unquote('rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(9, 9, 11, 0.25) 0px 1px 2px 0px'),
+
+                  _colors: (
+                    light : (
+                      switcher-background: white,
+                      switcher-border: 1px solid rgb(219, 219, 219),
+                    ),
+                    dark : (
+                      switcher-background: white,
+                      switcher-border: 1px solid rgba(41, 50, 57, 1),
+                    )
+                  ),
+
+                  _subclasses : (
+                    '.icon' : (
+                      width: .75rem,
+                      height: .75rem,
+                      opacity: 0,
+                      display: none,
+                      color: oklch(70.7% .022 261.325),
+                    ),
+                    '.icon:first-child' : (
+                      opacity: 1,
+                      display: inherit,
+                    )
+                  )
+                ),
+                '.span:is(:where(.switcher):has(:checked) *)' : (
+                  background: white,
+                  opacity: 1,
+                  transform: translateX(100%),
+                  border: 1px solid #3b5e38,
+
+                  _subclasses : (
+                    '.icon' : (
+                      opacity: 0,
+                      display: none
+
+                    ),
+                    '.icon:last-child' : (
+                      opacity: 1,
+                      display: inherit,
+                      color: rgb(74, 109, 71),
+                    )
+                  )
+                )
+              )
+            ),
+            '.switch' : (
+              appearance: none,
+              position: absolute,
+              inset: 0,
+            )
+          )
+        )
+      ),
+    ),
+
+    loader : (
+      animation: loader-rotation 2s linear infinite,
+
+      _subclasses : (
+        '& .circle' : (
+          transform-origin: 50% 50%,
+          stroke-width : 6,
+          stroke-dasharray: 283,
+          stroke-dashoffset: 280,
+          stroke-linecap: round,
+          stroke: var(--stroke),
+          animation: loader-rotation-cicle 1.4s linear infinite,
+        )
+      ),
+
+      _colors : (
+        light : (
+          stroke : rgba(0,0, 0, 0.85),
+        ),
+        dark : (
+          stroke : rgba(255,255, 255, 0.85),
+        )
+      ),
+
+      _animations : (
+        'loader-rotation' : (
+          '0%' : (
+            transform: rotate(0deg),
+          ),
+          '100%' : (
+            transform: rotate(360deg),
+          )
+        ),
+        'loader-rotation-cicle' : (
+          '0%' : (
+            stroke-dashoffset: 280,
+            transform: rotate(0),
+          ),
+          '15%' : (
+            stroke-width : 6,
+          ),
+          '40%' : (
+            stroke-dasharray: 220,
+            stroke-dashoffset: 150,
+          ),
+          '100%' : (
+            stroke-dashoffset: 280,
+            transform: rotate(720deg),
+          )
+        )
+      ),
+    ),
+
+    table : (
+      width: 100%,
+      _subclasses : (
+        '.top > * > *' : (
+          padding: 0.5rem 0,
+          border-bottom: 1px solid rgb(73, 80, 87),
+        ),
+        '.middle > * > *' : (
+            padding: 0.5rem 0,
+            border-bottom: 1px solid rgb(73, 80, 87),
+        ),
+        '.bottom > * > *' : (
+            padding: 0.5rem 0,
+        ),
+        '&.stripe' : (
+          _subclasses : (
+            'tbody tr:nth-child(odd) td' : (
+              background: rgba(33, 37, 41, 0.95),
+            )
+          )
+        ),
+        '&.hover' : (
+            _subclasses : (
+                'tbody tr:hover td' : (
+                    background: rgba(33, 37, 41, 0.95),
+                )
+            )
+        )
+      )
+    ),
+
+    overlay : (
+
+      --align-items : center,
+      --justify-content : center,
+
+      background : var(--background),
+
+      position: absolute,
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+
+      width: 100%,
+      height: 100%,
+
+      display: none,
+
+      align-items: var(--align-items),
+      justify-content: var(--justify-content),
+
+      z-index: functions.get-config($config, 'z-index.overlay'),
+
+      _colors: (
         light : (
         ),
         dark : (
-          background: rgba(15, 23, 42, .85),
+          background: rgba(20, 20, 20, .85),
+        )
+      ),
+
+      _subclasses : (
+        '&.show' : (
+          display: flex
+        ),
+        '&.blurred' : (
+          -webkit-backdrop-filter: blur(5px),
+          backdrop-filter: blur(5px),
         )
       )
     ),
 
     pagination : (
+
       --grid-template-columns: auto auto 1fr,
       --gap : 10px,
       --left-column-aligment: start,
       --center-column-alignment: center,
       --right-column-alignment: end,
+
       position: relative,
       display: grid,
       width: 100%,
@@ -724,50 +1428,56 @@ $components-config: (
       align-items: center,
       grid-template-columns: var(--grid-template-columns),
       grid-gap: var(--gap),
-      subclasses : (
-        ".left" : (
+
+      _subclasses : (
+        '.left' : (
           justify-self: var(--left-column-alignment),
         ),
-        ".center" : (
+        '.center' : (
           justify-self: var(--center-column-alignment),
         ),
-        ".right" : (
+        '.right' : (
           justify-self: var(--right-column-alignment)
         )
       ),
     ),
+
     placeholder : (
+
       --min-height: 0.55rem,
       --border-radius: .1875rem,
       --gap: .6rem,
+
       cursor: wait,
       display: flex,
       flex-direction: column,
+
       gap: var(--gap),
-      colors: (
-        light : (
-          background: #ccc
-        ),
-        dark : (
-          background: #ccc
-        )
-      ),
-      subclasses : (
-        ".el" : (
+
+      _subclasses : (
+        '.el' : (
           min-height: var(--min-height),
           border-radius: var(--border-radius),
-          background: var(--background)
+          background: var(--background),
+          _colors: (
+              light : (
+                  background: rgba(190, 190, 190, 0.75),
+              ),
+              dark : (
+                  background: #ccc
+              )
+          ),
         ),
-        "&.glow" : (
-          subclasses : (
-            ".el" : (
+        '&.glow' : (
+          _subclasses : (
+            '.el' : (
               animation: placeholder-glow 2s ease-in-out infinite,
             )
           )
         ),
-        "&.wave" : (
-          subclasses : (
-            ".el" : (
+        '&.wave' : (
+          _subclasses : (
+            '.el' : (
               mask-size: 200% 100%,
               -webkit-mask-size: 200% 100%,
               mask-image: linear-gradient(90deg, #0000, #fff, #0000),
@@ -776,6 +1486,158 @@ $components-config: (
             )
           )
         )
+      ),
+
+      _animations : (
+        'placeholder-glow' : (
+          '50%' : (
+            opacity: 0.5,
+          )
+        ),
+        'placeholder-wave' : (
+            '100%' : (
+              mask-position: -200% 0,
+              -webkit-mask-position: -200% 0,
+            )
+        )
+      )
+    ),
+
+    megamenu : (
+      position: relative,
+      _subclasses : (
+        '& .mega-link:hover' : (
+          _subclasses : (
+            '& .megamenu' : (
+              display: block,
+
+              opacity: 1,
+              transform: translateY(0),
+
+              _atrule : (
+                '@starting-style' : (
+                  opacity: 0,
+                  transform: translateY(-5px)
+                )
+              ),
+            )
+          )
+        ),
+        '& .megamenu' : (
+          --padding: 0.75rem,
+
+          display: none,
+
+          position: absolute,
+          left: 0,
+          right: 0,
+          width: 100%,
+
+          margin-top: 5px,
+          border-radius: 0.25rem,
+
+          transition: string.unquote('opacity 0.15s ease-in, transform 0.15s ease-in, display 0.15s ease-in allow-discrete'),
+          transform: translateY(-5px),
+          opacity: 0,
+
+          background: var(--background),
+          border: var(--border),
+          box-shadow: var(--shadow),
+          padding: var(--padding),
+
+          _colors: (
+            light : (
+              background: rgba(246, 246, 247, 1),
+              border: 1px solid rgb(219, 219, 219),
+              shadow: string.unquote('rgba(37, 41, 46, 0.04) 0px 6px 12px -3px, rgba(37, 41, 46, 0.12) 0px 6px 18px 0px'),
+            ),
+            dark : (
+              background: rgb(18, 18, 24),
+              border: 1px solid rgba(48, 54, 61, 0.75),
+              shadow: string.unquote('rgba(37, 41, 46, 0.04) 0px 6px 12px -3px, rgba(37, 41, 46, 0.12) 0px 6px 18px 0px'),
+            )
+          )
+
+        ),
+      )
+    ),
+
+    modal : (
+
+      display: none,
+      height: auto,
+      flex-direction: column,
+      padding: 0,
+
+      //background: var(--background),
+      //box-shadow: var(--box-shadow),
+      //border-left: 1px solid rgb(4, 90, 195),
+
+      //will-change: transform,
+      //transition: transform 300ms cubic-bezier(0.25,0.1,0.25,1),
+      //transform-origin: right,
+      //transform: translateX(100%),
+
+      background: var(--background),
+      border: var(--border),
+
+      max-width: 42rem,
+      width: 100%,
+      margin: 0 auto,
+      border-radius: 7px,
+      transition: string.unquote('opacity 0.15s ease-in, display 0.15s ease-in allow-discrete, transform 0.15s ease-in'),
+      transform: scale(.75),
+
+      box-shadow: string.unquote('rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;'),
+      opacity: 0,
+      //transition: string.unquote('opacity 1s, display 1s allow-discrete'),
+
+      z-index: functions.get-config($config, 'z-index.modal'),
+
+      _colors: (
+        light : (
+          border: 1px solid rgba(198, 198, 198, .75),
+          background : rgba(246, 246, 247, 1),
+          box-shadow: string.unquote('0rem 1.25rem 1.25rem -0.5rem rgba(26,26,26,.28)'),
+        ),
+        dark: (
+          border: 1px solid rgba(48, 54, 61, 0.75),
+          background: rgb(13, 17, 23),
+          box-shadow: string.unquote('rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;'),
+        )
+      ),
+
+      _subclasses : (
+        '&[open]' : (
+          display: flex,
+          opacity: 1,
+          transform: scale(1),
+          transition: string.unquote('opacity 0.3s ease-out, display 0.3s ease-out allow-discrete, transform 0.3s ease-out'),
+          _atrule : (
+            '@starting-style' : (
+              opacity: 0,
+              transform: scale(.75)
+            )
+          ),
+        ),
+        '& > :nth-child(1)' : (
+          display: flex,
+          justify-content: space-between,
+        ),
+        '& > :nth-child(2)' : (
+          height: 100%,
+          padding: 1rem 0,
+        ),
+        '& > :nth-child(3)' : (
+          display: flex,
+          justify-content: flex-end,
+        )
+      ),
+
+      _animations : (
+        'modal_animation_toggle' : (
+
+        )
       )
     ),
 
@@ -793,14 +1655,7 @@ $components-config: (
       padding: 0,
       list-style-type: none,
 
-      colors: (
-        light : (
-        ),
-        dark: (
-        )
-      ),
-
-      subclasses : (
+      _subclasses : (
         '&.horizontal' : (
           --align-items: center,
           --flex-direction : row,
@@ -809,6 +1664,7 @@ $components-config: (
         '&.vertical' : (
           --flex-direction : column,
           --align-items: auto,
+          --gap : 0.5rem,
         ),
         '&.tabs' : (
         ),
@@ -816,19 +1672,10 @@ $components-config: (
         ),
         '.item' : (
           width: auto,
-          subclasses : (
+          _subclasses : (
             '.link' : (
               display: inline-flex,
-              color: var(--color),
-              colors: (
-                light : (
-                  color: '#333',
-                ),
-                dark : (
-                  color: '#fff'
-                )
-              ),
-              subclasses: (
+              _subclasses: (
                 '&:hover' : (
                   text-decoration : none
                 )
@@ -838,60 +1685,278 @@ $components-config: (
         )
       )
     ),
+
     navbar : (
 
       --grid-template-columns: auto auto 1fr,
       --gap : 10px,
-      --left-column-aligment: start,
-      --center-column-alignnent: center,
-      --right-column-alignment: end,
-      position: relative,
+
       display: grid,
       width: 100%,
       max-width: 100%,
       align-items: center,
       margin: 0,
       padding: 0,
+
       grid-template-columns: var(--grid-template-columns),
       grid-gap: var(--gap),
-      colors: (
+    ),
+
+    sidecap : (
+
+      --width : 20.75rem,
+
+      display: none,
+      flex-direction: column,
+
+      position: fixed,
+      top: 0,
+      right: 0,
+      height: 100%,
+
+      width: var(--width),
+      background: var(--background),
+      box-shadow: var(--box-shadow),
+      border-left: var(--border),
+      transform: translateX(100%),
+      transition: string.unquote('opacity 0.3s ease-in, transform 0.3s ease-in, display 0.3s ease-in allow-discrete'),
+      opacity : 0,
+
+      _colors: (
         light : (
+          background: rgba(246, 246, 247, 1),
+          border: 1px solid rgb(219, 219, 219),
+          box-shadow: string.unquote('0rem 1.25rem 1.25rem -0.5rem rgba(26,26,26,.28)'),
         ),
         dark: (
+          background: rgb(18, 18, 24),
+          border: 1px solid rgba(48, 54, 61, 0.75),
+          box-shadow: string.unquote('rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;'),
         )
       ),
-      subclasses : (
-        ".left" : (
-          justify-self: var(--left-column-alignment),
+
+      _subclasses : (
+        '&.open' : (
+          transform: translateX(0),
+          display: flex,
+          opacity: 1,
+          transition: string.unquote('opacity 0.3s ease-out, transform 0.3s ease-out, display 0.3s ease-out allow-discrete'),
+          _atrule : (
+            '@starting-style' : (
+              opacity: 0,
+              transform: translateX(100%),
+            )
+          ),
         ),
-        ".center" : (
-          justify-self: var(--center-column-alignment),
+        '& > :nth-child(1)' : (
+          display: flex,
+          padding: 0.25rem,
+          justify-content: space-between,
         ),
-        ".right" : (
-          justify-self: var(--right-column-alignment)
+        '& > :nth-child(2)' : (
+          height: 100%,
+          padding: 0.25rem,
+        ),
+        '& > :nth-child(3)' : (
+          display: flex,
+          padding: 0.25rem,
         )
       )
     ),
 
-    sidecap : (
+    tooltip : (
 
-      position: absolute,
-      top: 0,
-      right: 0,
-      height: 100%,
-      display: flex,
-      flex-direction: column,
-      width: 300px,
+      position: relative,
 
-      background: var(--background),
-      colors: (
-        light : (
-          background : #ccc
+      _subclasses : (
+
+        '&.on-hover:hover .tooltip, .tooltip.show' : (
+          display: block,
+          opacity: 1,
+          transform: translateY(5px),
+
+          transition: string.unquote('transform 0.15s ease-out, opacity 0.15s ease-out, display 0.15s ease-out allow-discrete'),
+
+          _atrule : (
+            '@starting-style' : (
+              opacity: 0,
+              transform: translateY(-3px)
+            )
+          ),
+
+          _subclasses : (
+            '&.to-left' : (
+              transform: translateX(-3px),
+              _atrule : (
+                '@starting-style' : (
+                  opacity: 0,
+                  transform: translateX(-2px)
+                )
+              ),
+            ),
+            '&.to-right' : (
+              transform: translateX(3px),
+              _atrule : (
+                '@starting-style' : (
+                  opacity: 0,
+                  transform: translateX(-2px)
+                )
+              ),
+            )
+          )
+        ),
+
+        '.tooltip' : (
+
+          --padding: 0.25rem 0.5rem,
+
+          border: var(--border),
+          background: var(--background),
+          padding: var(--padding),
+
+          opacity: 0,
+          display: none,
+
+          position: absolute,
+          bottom: calc(100% + 10px),
+          left: calc(50% - 1px),
+          width: auto,
+
+          font-size: 0.875rem,
+          border-radius: 5px,
+
+          z-index: functions.get-config($config, 'z-index.tooltip'),
+
+          color: inherit,
+
+          transition: string.unquote('transform 0.15s ease-in, opacity 0.15s ease-in, display 0.15s ease-in allow-discrete'),
+          translate: -50% 0,
+
+          _colors : (
+            light : (
+              background: #fff,
+              border: 1px solid #e5e6ea,
+            ),
+            dark : (
+              background: #18191b,
+              border: 1px solid #35383c,
+            )
+          ),
+
+          _atrule : (
+            '@starting-style' : (
+              opacity: 0,
+              transform: translateY(-3px)
+            )
+          ),
+
+          _subclasses : (
+
+            '& > :first-child' : (
+              position: relative,
+              z-index: functions.get-config($config, 'z-index.tooltip'),
+            ),
+
+            '&.to-bottom' : (
+              bottom: unset,
+              top: calc(100% + 5px),
+
+              _subclasses : (
+                '&.with-arrow' : (
+                  _subclasses : (
+                    '&:before' : (
+                      left: calc(50% - 1px),
+                      top: -0.5px,
+                    ),
+                    '&:after' : (
+                      left: calc(50% - 1px),
+                      top: -2px,
+                    )
+                  )
+                )
+              )
+            ),
+
+            '&.to-right' : (
+              bottom: auto,
+              right: -5px,
+              left: unset,
+              top: 50%,
+              translate: 100% -50%,
+
+              _subclasses : (
+                '&.with-arrow' : (
+                  _subclasses : (
+                    '&:before' : (
+                      left: -0.5px,
+                      top: 50%,
+                    ),
+                    '&:after' : (
+                      left: -2px,
+                      top: 50%,
+                    )
+                  )
+                )
+              )
+            ),
+
+            '&.to-left' : (
+              bottom: auto,
+              top: 50%,
+              left: -5px,
+              right: unset,
+              translate: -100% -50%,
+
+              _subclasses : (
+                '&.with-arrow' : (
+                  _subclasses : (
+                    '&:before' : (
+                      left: calc(100% - 2px),
+                      top: 50%,
+                    ),
+                    '&:after' : (
+                      left: calc(100% - 0.5px),
+                      top: 50%,
+                    )
+                  )
+                )
+              )
+            ),
+
+            '&.with-arrow' : (
+
+              _subclasses : (
+
+                '&:before' : (
+                  content: '',
+                  position: absolute,
+                  display: block,
+                  width: 8px,
+                  height: 8px,
+                  transform-origin: 50% 50%,
+                  transform: rotate(45deg) translateX(-50%),
+                  background-color: var(--background),
+                  left: calc(50% - 1px),
+                  top: calc(100% - 2px),
+                ),
+
+                '&:after' : (
+                  content: '',
+                  display: block,
+                  position: absolute,
+                  width: 8px,
+                  height: 8px,
+                  transform-origin: 50% 50%,
+                  transform: rotate(45deg) translateX(-50%),
+                  border: var(--border),
+                  left: calc(50% - 1px),
+                  top: calc(100% - 0.5px),
+                  z-index: -1,
+                ),
+              )
+            ),
+          )
         ),
-        dark: (
-          background: rgb(45, 56, 66),
-          box-shadow: 0rem 1.25rem 1.25rem -0.5rem rgba(26, 26, 26, .28)
-        )
       )
     )
   )