feat(accordion): support nested accordion

Signed-off-by: Ahmed Alsinan <[email protected]>

.all-contributorsrc

@@ -1569,6 +1569,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "tekno0ryder",
+      "name": "Ahmed Alsinan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/8721803?v=4",
+      "profile": "https://github.com/tekno0ryder",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

README.md

@@ -297,6 +297,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/nandininarayanofficial"><img src="https://avatars.githubusercontent.com/u/165769075?v=4?s=100" width="100px;" alt=""/><br /><sub><b>nandininarayanofficial</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=nandininarayanofficial" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/digiacomo-a"><img src="https://avatars.githubusercontent.com/u/117646602?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andrea DG</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=digiacomo-a" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/lluisrojass"><img src="https://avatars.githubusercontent.com/u/15043356?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luis</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=lluisrojass" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/tekno0ryder"><img src="https://avatars.githubusercontent.com/u/8721803?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ahmed Alsinan</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=tekno0ryder" title="Code">💻</a></td>
   </tr>
 </table>
 

packages/styles/scss/components/accordion/_accordion.scss

@@ -217,7 +217,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
   .#{$prefix}--accordion__item--active {
     overflow: visible;
 
-    .#{$prefix}--accordion__wrapper {
+    > .#{$prefix}--accordion__wrapper {
       // Properties for when the accordion is open
       overflow: visible;
       max-block-size: fit-content;
@@ -226,9 +226,11 @@ $content-padding: 0 0 0 $spacing-05 !default;
       padding-block-end: $spacing-06;
     }
 
-    .#{$prefix}--accordion__arrow {
-      fill: $icon-primary;
-      transform: rotate(-90deg) #{'/*rtl:ignore*/'};
+    > .#{$prefix}--accordion__heading {
+      > .#{$prefix}--accordion__arrow {
+        fill: $icon-primary;
+        transform: rotate(-90deg) #{'/*rtl:ignore*/'};
+      }
     }
   }