@nulllogic/scssleon 1.0.3 → 1.0.4

package/scss/themes/_default.scss

@@ -1,28 +1,37 @@
 @use 'sass:map';
 @use "sass:string";
 
-// Main theme colors
+// Main theme _colors
 $theme: () !default;
-$updated-theme : () !default;
+$updated-theme: () !default;
 
 $html-config: (
   root: (
+
     --font-family-default : string.unquote("system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'"),
     --font-family-monospace : string.unquote("ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"),
+
   ),
+
   html : (
+
     body : (
-      margin: 0,
       -webkit-text-size-adjust: 100%,
-      font-size : 1rem,
+      -webkit-font-smoothing: antialiased,
+
+      margin: 0,
+
+      font-size : 1em,
       font-weight: normal,
-      line-height : 1,
       font-family: var(global(--font-family-default)),
+      line-height : 1,
+      text-rendering: optimizelegibility,
+      font-synthesis-weight: none,
+
       color: var(--color),
       background: var(--background),
-      text-rendering: optimizelegibility,
-      -webkit-font-smoothing: antialiased,
-      colors: (
+
+      _colors: (
         light : (
           background: '#fff',
           color: '#ccc',
@@ -31,12 +40,20 @@ $html-config: (
           background : rgba(18, 20, 23, 1),
           color: '#ccc'
         )
+      ),
+
+      _subclasses : (
+        '&[scroll-lock]' : (
+          overflow: hidden
+        )
       )
     ),
+
     a : (
-      text-decoration : underline,
-      color: var(--a-color),
-      colors: (
+      text-decoration : none,
+      color: var(--color),
+
+      _colors: (
         light : (
           color: '#ccc',
         ),
@@ -44,9 +61,13 @@ $html-config: (
           color: '#ccc'
         )
       ),
-      subclasses : (
+
+      _subclasses : (
+        "&:hover": (
+          text-decoration: none
+        ),
         "&[target='_blank']" : (
-          subclasses : (
+          _subclasses : (
             "&:after" : (
               background: red,
               display: inline-flex,
@@ -57,6 +78,7 @@ $html-config: (
           ),
         )
       )
+
     ),
     ol: (
       margin: 0,
@@ -78,9 +100,6 @@ $html-config: (
       width: auto,
       height: auto,
       max-width: 100%,
-    ),
-    p : (
-      margin: 0
     )
   )
 );
@@ -89,51 +108,60 @@ $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.5rem,
-      line-height : inherit,
+      font-size: 3.75rem,
+      line-height: 1,
       font-weight: 500,
       margin: 0,
       padding: 0 0 15px 0
     ),
     h2 : (
-      font-size: 2.8rem,
-      line-height : inherit,
+      font-size: 3rem,
+      line-height: 1,
       font-weight: 500,
       margin: 0,
       padding: 0 0 15px 0
     ),
     h3 : (
-      font-size: 2.4rem,
-      line-height : inherit,
+      font-size: 2.25rem,
+      line-height: 1.3,
       font-weight: 500,
       margin: 0,
       padding: 0 0 15px 0
     ),
     h4 : (
-      font-size: 2rem,
-      line-height : inherit,
+      font-size: 1.875rem,
+      line-height: 1.2,
       font-weight: 500,
       margin: 0,
       padding: 0 0 15px 0
     ),
     h5 : (
-      font-size: 1.8rem,
-      line-height : inherit,
+      font-size: 1.5rem,
+      line-height: 1.4,
       font-weight: 500,
       margin: 0,
       padding: 0 0 15px 0
     ),
     h6 : (
-      font-size: 1.625rem,
-      line-height : inherit,
+      font-size: 1.25rem,
+      line-height: 1.5,
       font-weight: 500,
       margin: 0,
       padding: 0 0 15px 0
     ),
     p : (
       margin: 0,
-      padding: 0 0 15px 0
+      padding: 0 0 15px 0,
+      line-height: clamp(1.25em, 4vw, 1.5em),
     ),
     abbr: (
       attributes : (
@@ -187,19 +215,20 @@ $content-config: (
       font-family: var(global(--font-family-monospace)),
     ),
     code: (
-      color: var(--color),
-      background: var(--background),
-      padding: 0 5px,
-      colors: (
-        light : (
-          background: '#fff',
-          color: '#ccc',
-        ),
-        dark : (
-          background : rgba(38,69,116,1),
-          color: '#fff'
-        )
-      )
+      //box-shadow: rgb(253, 224, 71) 0px -26.529121px 0px 0px inset,
+      //color: var(--color),
+      //background: var(--background),
+      //padding: 2px 5px,
+      //_colors: (
+      //  light : (
+      //    background: '#fff',
+      //    color: '#ccc',
+      //  ),
+      //  dark : (
+      //    background : rgb(53, 56, 65),
+      //    color: '#fff'
+      //  )
+      //)
     ),
     kbd: (
     ),
@@ -268,7 +297,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
         ),
@@ -284,29 +313,59 @@ $updated-theme: map.deep-merge($updated-theme, $content-config);
 
 $components-config: (
   components: (
-
     alert: (
 
-      --border-radius: .25rem,
-      --padding: 1.25rem,
+      --border-radius: .5rem,
+      --grid-template-columns: auto auto 1fr,
+      --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),
       outline: 1px solid transparent,
       position: relative,
-      display: flex,
+      display: grid,
+      width: 100%,
+      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)"),
         ),
         dark : (
-          background: rgb(48, 56, 66),
-          border: 1px solid rgba(182, 199, 216, .35),
-          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)"),
+          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),
+        ),
       )
 
     ),
@@ -314,20 +373,78 @@ $components-config: (
     accordion : (
 
       --border-radius: .25rem,
-      --padding: 1.25rem,
+      --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 : (
           border: 1px solid rgba(182, 199, 216, .35),
           background: rgb(46, 56, 66),
         )
-      )
+      ),
+
+      _subclasses : (
 
+        '.item' : (
+          padding: var(--item-padding),
+
+          _subclasses : (
+            '.question' : (
+
+              display: flex,
+              border-bottom: 1px solid #ccc,
+              justify-content: space-between,
+
+              _subclasses : (
+                '> button' : (
+                  color: inherit,
+                  background: none,
+                  border: none,
+                  cursor: pointer,
+                  display: flex,
+                  padding: 0,
+                  font-size: inherit,
+                  width: 100%,
+                  align-items: center,
+                  justify-content: space-between
+                ),
+                '&.open' : (
+                  _subclasses : (
+                    '.icon' : (
+                      transform: rotate(180deg)
+                    )
+                  )
+                ),
+                '.icon' : (
+
+                )
+              )
+            ),
+
+            '.answer' : (
+              display: block,
+              padding: 0.5rem 0,
+              _subclasses : (
+                '&[hidden]' : (
+                  display: none,
+                )
+              )
+            ),
+
+            '&:last-child' : (
+              padding-bottom: 0,
+            )
+          )
+        )
+      )
     ),
 
     badge : (
@@ -338,12 +455,10 @@ $components-config: (
       font-size: .75rem,
       line-height: 1rem,
       font-weight: 500,
-
       white-space: nowrap,
       vertical-align: middle,
       align-items: center,
       display: inline-flex,
-
       padding: var(--padding),
       border-radius: var(--border-radius),
       color: var(--color),
@@ -351,7 +466,7 @@ $components-config: (
       box-shadow: var(--box-shadow),
       border: var(--border),
 
-      colors: (
+      _colors: (
         light : (
           color: #ccc,
           box-shadow: none
@@ -363,28 +478,31 @@ $components-config: (
           border: 1px solid #ccc,
         )
       )
-    ),
 
+    ),
     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 : (
+
+      _subclasses : (
         ".item" : (
           display: inline-flex,
-          subclasses : (
+          _subclasses : (
             ".link" : (
-
             )
           )
         )
@@ -392,33 +510,29 @@ $components-config: (
     ),
 
     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 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
       ),
-      --padding: .5rem .75rem,
 
       display: inline-flex,
       align-items: center,
       align-content: center,
       white-space: nowrap,
-      user-select: none,
       text-decoration: none,
       cursor: pointer,
-
       vertical-align: middle,
       font-size: 1em,
-
       padding: var(--padding),
       border: var(--border),
       background: var(--background),
       color: var(--color),
       border-radius: var(--border-radius),
-
       // This one is required for button group use
       position: relative,
 
@@ -429,38 +543,33 @@ $components-config: (
         box-shadow .15s ease-in-out
       ),
 
-      colors: (
+      _colors: (
         light: (
           color: #fff,
           background: #fff
         ),
         dark: (
-
           // Default
           color: #fff,
           background: rgb(48, 56, 66),
           border: 1px solid rgba(240, 246, 252, .25),
-
           // Hover state
           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")
-
         )
       ),
 
-      subclasses : (
+      _subclasses : (
         "&:hover:not(.loading, [disabled], .btn-link)" : (
           color: var(--hover-color),
           background: var(--hover-background),
@@ -476,9 +585,10 @@ $components-config: (
           background: transparent,
           border: none,
           box-shadow: none,
-          subclasses: (
+          text-decoration: underline,
+          _subclasses: (
             "&:hover": (
-              text-decoration: underline,
+              text-decoration: none,
             )
           )
         ),
@@ -497,42 +607,32 @@ $components-config: (
 
     button-group: (
       --gap: 10px,
-
       display: flex,
       flex-wrap: wrap,
-
-      subclasses : (
+      _subclasses : (
         ".btn:first-child" : (
           border-start-end-radius: 0,
           border-end-end-radius: 0,
         ),
-
         ".btn:last-child" : (
           border-start-start-radius: 0,
           border-end-start-radius: 0,
         ),
-
         ".btn:not(:first-child)" : (
           margin-left: - 1px
         ),
-
         ".btn:not(:first-child, :last-child)" : (
           border-radius: 0
         ),
-
         ".btn:only-child" : (
-
         ),
-
         ".btn:hover, .btn:focus" : (
           z-index: 1
         ),
-
         "&.separated" : (
           gap: var(--gap),
           --border-radius: 5px,
-
-          subclasses : (
+          _subclasses : (
             ".btn" : (
               margin: 0,
               border-radius: var(--border-radius)
@@ -542,25 +642,51 @@ $components-config: (
       )
     ),
 
+    dropdown: (
+      position: absolute,
+      top: 100%,
+      left: 0,
+      border: var(--border),
+      border-radius: 0.25rem,
+      padding: 4px 0,
+      width: 200px,
+      height: auto,
+      background: var(--background),
+
+      _colors: (
+        light : (
+          border: 1px solid #dddee0,
+          background: rgb(200, 200, 200),
+        ),
+        dark : (
+          border: 1px solid rgba(48, 54, 61, .75),
+          background: rgb(22, 27, 34),
+          shadow: rgba(1, 4, 9, 0.4) 0 1px 0 0
+        )
+      )
+    ),
+
     card : (
+
       --border-radius: .25rem,
-      --padding: 10px,
+      --padding: .5rem,
 
       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(242, 242, 242),
+          border : 1px solid rgb(235, 235, 235),
+          box-shadow: 0 1px 8px -2px rgba(0, 0, 0, 0.12),
         ),
         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
         )
@@ -570,11 +696,10 @@ $components-config: (
     container : (
       margin: 0 auto,
       width: 100%,
-      colors: (
+      _colors: (
         light : (),
         dark : ()
       ),
-
     ),
 
     form : (
@@ -583,10 +708,12 @@ $components-config: (
         margin-bottom: 10px,
       ),
       input : (
+
         --border-radius: .25rem,
         --padding: .5rem .75rem,
+
         display: block,
-        colors: (
+        _colors: (
           light : (
           ),
           dark : (
@@ -600,7 +727,7 @@ $components-config: (
         --border-radius: .25rem,
         --padding: .5rem .75rem,
         display: block,
-        colors: (
+        _colors: (
           light : (
           ),
           dark : (
@@ -613,7 +740,7 @@ $components-config: (
       checkbox : (
         --border-radius: .25rem,
         --padding: .5rem .75rem,
-        colors: (
+        _colors: (
           light : (
           ),
           dark : (
@@ -626,7 +753,7 @@ $components-config: (
       radio : (
         --border-radius: .25rem,
         --padding: .5rem .75rem,
-        colors: (
+        _colors: (
           light : (
           ),
           dark : (
@@ -645,19 +772,32 @@ $components-config: (
 
     overlay : (
 
+      background : var(--background),
+
       position: absolute,
       top: 0,
       bottom: 0,
       left: 0,
       right: 0,
+
       width: 100%,
       height: 100%,
 
-      colors: (
+      display: none,
+      align-items: center,
+      justify-content: center,
+
+      _colors: (
         light : (
         ),
         dark : (
-          background: rgba(15, 23, 42, .25),
+          background: rgba(20, 20, 20, .85),
+        )
+      ),
+
+      _subclasses : (
+        '&.show' : (
+          display: flex
         )
       )
     ),
@@ -666,7 +806,6 @@ $components-config: (
 
       --grid-template-columns: auto auto 1fr,
       --gap : 10px,
-
       --left-column-aligment: start,
       --center-column-alignment: center,
       --right-column-alignment: end,
@@ -676,11 +815,10 @@ $components-config: (
       width: 100%,
       max-width: 100%,
       align-items: center,
-
       grid-template-columns: var(--grid-template-columns),
       grid-gap: var(--gap),
 
-      subclasses : (
+      _subclasses : (
         ".left" : (
           justify-self: var(--left-column-alignment),
         ),
@@ -702,10 +840,9 @@ $components-config: (
       cursor: wait,
       display: flex,
       flex-direction: column,
-
       gap: var(--gap),
 
-      colors: (
+      _colors: (
         light : (
           background: #ccc
         ),
@@ -714,23 +851,21 @@ $components-config: (
         )
       ),
 
-      subclasses : (
+      _subclasses : (
         ".el" : (
-            min-height: var(--min-height),
-            border-radius: var(--border-radius),
-            background: var(--background)
+          min-height: var(--min-height),
+          border-radius: var(--border-radius),
+          background: var(--background)
         ),
-
         "&.glow" : (
-          subclasses : (
+          _subclasses : (
             ".el" : (
               animation: placeholder-glow 2s ease-in-out infinite,
             )
           )
         ),
-
         "&.wave" : (
-          subclasses : (
+          _subclasses : (
             ".el" : (
               mask-size: 200% 100%,
               -webkit-mask-size: 200% 100%,
@@ -743,10 +878,75 @@ $components-config: (
       )
     ),
 
+    modal : (
+
+      display: none,
+      height: auto,
+
+      align-items: center,
+
+      //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%),
+
+      padding: 0.5rem,
+      background: rgb(13, 17, 23),
+      max-width: 42rem,
+      width: 100%,
+      margin: 0 auto,
+      border: 1px solid #3d444d,
+      border-radius: 7px,
+      transition-behavior: allow-discrete,
+      transition: opacity 0.2s linear,
+      opacity: 0,
+
+      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;'),
+
+      _colors: (
+        light : (
+          //background : #ccc,
+          box-shadow: string.unquote('0rem 1.25rem 1.25rem -0.5rem rgba(26,26,26,.28)'),
+        ),
+        dark: (
+          //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,
+          _atrule : (
+            '@starting-style' : (
+              opacity: 1,
+            )
+          )
+        ),
+        '.top' : (
+          display: flex,
+          justify-content: space-between,
+        ),
+        '.middle' : (
+          height: 100%,
+          padding: 1rem 0,
+        ),
+        '.bottom' : (
+          display: flex,
+          justify-content: flex-end,
+        )
+      )
+    ),
+
     nav : (
 
       --flex-direction: row,
-      --align-items: auto,
+      --align-items: center,
       --gap: 0,
 
       display: flex,
@@ -757,55 +957,51 @@ $components-config: (
       padding: 0,
       list-style-type: none,
 
-      colors: (
+      _colors: (
         light : (
         ),
         dark: (
         )
       ),
 
-      subclasses : (
+      _subclasses : (
         '&.horizontal' : (
           --align-items: center,
           --flex-direction : row,
+          --gap : 12.5px,
         ),
         '&.vertical' : (
           --flex-direction : column,
+          --align-items: auto,
+          --gap : 0.5rem,
         ),
         '&.tabs' : (
-
         ),
         '&.pills' : (
-
         ),
         '.item' : (
           width: auto,
-
-          subclasses : (
+          _subclasses : (
             '.link' : (
-                display: inline-flex,
-                padding: 10px,
-                color: var(--color),
-
-                colors: (
-                  light : (
-                    color: '#333',
-                  ),
-                  dark : (
-                    color: '#fff'
-                  )
+              display: inline-flex,
+              color: var(--color),
+              _colors: (
+                light : (
+                  color: rgba(255, 255, 255, 1),
                 ),
-
-                subclasses: (
-                  '&:hover' : (
-                    text-decoration : none
+                dark : (
+                  color: rgba(255, 255, 255, 1),
+                )
+              ),
+              _subclasses: (
+                '&:hover' : (
+                  text-decoration : none
                 )
               )
             ),
           )
         )
       )
-
     ),
 
     navbar : (
@@ -827,14 +1023,16 @@ $components-config: (
       grid-template-columns: var(--grid-template-columns),
       grid-gap: var(--gap),
 
-      colors: (
+      z-index: 5,
+
+      _colors: (
         light : (
         ),
         dark: (
         )
       ),
 
-      subclasses : (
+      _subclasses : (
         ".left" : (
           justify-self: var(--left-column-alignment),
         ),
@@ -848,21 +1046,54 @@ $components-config: (
     ),
 
     sidecap : (
-      position: absolute,
+
+      --width : 20.75rem,
+
+      display: flex,
+      flex-direction: column,
+
+      position: fixed,
       top: 0,
       right: 0,
       height: 100%,
 
-      display: flex,
-      flex-direction: column,
+      width: var(--width),
+      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%),
 
-      colors: (
+      _colors: (
         light : (
-          background : #ccc
+          background : #ccc,
+          box-shadow: string.unquote('0rem 1.25rem 1.25rem -0.5rem rgba(26,26,26,.28)'),
         ),
         dark: (
-          background: rgb(45, 56, 66),
-          box-shadow: 0rem 1.25rem 1.25rem -0.5rem rgba(26,26,26, .28)
+          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' : (
+          transform: translateX(0),
+        ),
+        '.top' : (
+          display: flex,
+          padding: 0.25rem,
+          justify-content: space-between,
+        ),
+        '.middle' : (
+          height: 100%,
+          padding: 0.25rem,
+        ),
+        '.bottom' : (
+          display: flex,
+          padding: 0.25rem,
         )
       )
     )
@@ -871,4 +1102,4 @@ $components-config: (
 
 $updated-theme: map.deep-merge($updated-theme, $components-config);
 
-$theme: map.deep-merge($updated-theme, $theme);
+$theme: map.deep-merge($updated-theme, $theme);