updated accordian and dropdown to not overlap the arrow, provide enough space for the arrow, and keep the arrow at the top when theres multi-lines for the sumary text.

Reverted back the container padding.

Author: Yohn

docs/index.html

@@ -542,7 +542,7 @@ <h6>(resize width of screen if you don't see it)</h6>
 						<ol id="nav-example" role="list">
 							<li role="listitem"><a href="javascript:void(0);">Home</a></li>
 							<li role="listitem">
-								<details class="dropdown hide-arrow">
+								<details class="dropdown">
 									<summary class="secondary" role="button">About</summary>
 									<ul>
 										<li><a href="javascript:void(0);">What’s new in v2?</a></li>
@@ -574,7 +574,7 @@ <h3>Hamburger Menu Under Nav Example</h3>
 						<ol id="nav-example2" role="list">
 							<li role="listitem"><a href="javascript:void(0);">Home</a></li>
 							<li role="listitem">
-								<details class="dropdown hide-arrow">
+								<details class="dropdown">
 									<summary>About 2</summary>
 									<ul>
 										<li><a href="javascript:void(0);">What’s new in v2?</a></li>
@@ -600,11 +600,20 @@ <h3>Hamburger Menu Under Nav Example</h3>
 							<li role="listitem"><a href="javascript:void(0);">Pico CSS</a></li>
 							<li role="listitem"><a href="javascript:void(0);">Example</a></li>
 							<li role="listitem">
-								<details class="dropdown hide-arrow">
+								<details class="dropdown">
 									<summary>Submenu</summary>
 									<ul>
 										<li><a href="javascript:void(0);">Another Link</a></li>
 										<li><a href="javascript:void(0);">And Again</a></li>
+										<li>
+											<details class="dropdown">
+												<summary>Another Submenu</summary>
+												<ul>
+													<li><a href="javascript:void(0);">Another Link</a></li>
+													<li><a href="javascript:void(0);">And Again</a></li>
+												</ul>
+											</details>
+										</li>
 									</ul>
 								</details>
 							</li>

scss/components/_accordion.scss

@@ -7,7 +7,7 @@
    */
   #{$parent-selector} details {
     display: block;
-    margin-bottom: var(#{$css-var-prefix}spacing);
+    margin-block-end: var(#{$css-var-prefix}spacing);
 
     @if $enable-classes {
       &.hide-arrow > summary::after {
@@ -16,9 +16,13 @@
       }
     }
 
+    &:not(.hide-arrow) > summary {
+      padding-inline-end: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 3.25);
+    }
+
     summary {
       position: relative;
-      padding-inline-end: var(#{$css-var-prefix}block-spacing-horizontal);
+      //padding-inline-end: var(#{$css-var-prefix}block-spacing-horizontal);
       line-height: 1rem;
       list-style-type: none;
       cursor: pointer;
@@ -91,13 +95,11 @@
         }
       }
     }
-    //!
-    //!
-    //!
+
     // Open
     &[open] {
       > summary {
-        margin-bottom: var(#{$css-var-prefix}spacing);
+        margin-block-end: var(#{$css-var-prefix}spacing);
 
         &:not([role]) {
           &:not(:focus) {

scss/components/_dropdown.scss

@@ -138,7 +138,7 @@
         min-width: 200px;
         min-width: fit-content;
         margin: 0;
-        margin-top: var(#{$css-var-prefix}outline-width);
+        margin-block-start: var(#{$css-var-prefix}outline-width);
         padding: 0;
         border: var(#{$css-var-prefix}border-width)
           solid
@@ -163,22 +163,22 @@
 
         li {
           width: 100%;
-          margin-bottom: 0;
+          margin-block-end: 0;
           padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
             var(#{$css-var-prefix}form-element-spacing-horizontal);
           list-style: none;
 
           &:first-of-type {
-            margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
+            margin-block-start: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
           }
 
           &:last-of-type {
-            margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
+            margin-block-end: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
           }
 
           details {
             width: 100%;
-            margin-bottom: 0;
+            margin-block-end: 0;
             > summary {
               line-height: var(#{$css-var-prefix}line-height);
             }
@@ -224,7 +224,7 @@
       // Button opened
       // inside container type accordion
       // ––––––––––––––––––––
-      margin-bottom: 0;
+      margin-block-end: 0;
 
       // Close for dropdown
       // inside container type accordion
@@ -263,7 +263,7 @@
     display: inline;
     margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
     // Override height
-    margin-bottom: 0;
+    margin-block-end: 0;
 
     &.hide-arrow {
       > summary::after {
@@ -294,11 +294,15 @@
         }
       }
     }
+
+    &:not(.hide-arrow) > summary {
+      padding-inline-end: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 3.25);
+    }
   }
 
   // Label
   // ––––––––––––––––––––
   #{$parent-selector} label > details.dropdown {
-    margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
+    margin-block-start: calc(var(#{$css-var-prefix}spacing) * 0.25);
   }
 }

scss/layout/_container.scss

@@ -14,16 +14,15 @@
   }
 
   #{$parent-selector} .container {
-    //$first-breakpoint: true;
+    $first-breakpoint: true;
     @each $key, $values in $breakpoints {
       @if $values {
         @media (min-width: map.get($values, "breakpoint")) {
           max-width: map.get($values, "viewport");
-          //@if $first-breakpoint {
-          //  $first-breakpoint: false;
-          //  padding-right: 0;
-          //  padding-left: 0;
-          //}
+          @if $first-breakpoint {
+            $first-breakpoint: false;
+            padding-inline: 0;
+          }
         }
       }
     }