diff --git a/src/definitions/modules/accordion.less b/src/definitions/modules/accordion.less
index 7400515487..e85e603da2 100755
--- a/src/definitions/modules/accordion.less
+++ b/src/definitions/modules/accordion.less
@@ -31,17 +31,16 @@
 }
 
 /* Title */
-.ui.accordion .title,
-.ui.accordion .accordion .title {
+.ui.accordion.menu .item > .title,
+.ui.accordion > .title,
+.ui.accordion .accordion > .title {
   cursor: pointer;
-}
-
-/* Default Styling */
-.ui.accordion .title {
   padding: @titlePadding;
   font-family: @titleFont;
   font-size: @titleFontSize;
   color: @titleColor;
+  list-style: none;
+  line-height: @titleLineHeight;
 }
 
 /* Default Styling */
@@ -68,6 +67,10 @@
   transition: @iconTransition;
   vertical-align: @iconVerticalAlign;
   transform: @iconTransform;
+  &.right when (@variationAccordionRightDropdown) {
+    float:right;
+    transform: @iconTransformRight;
+  }
 }
 
 /*--------------
@@ -95,6 +98,8 @@
             States
 *******************************/
 
+.ui.accordion[open] > .title .dropdown.icon,
+.ui.accordion .accordion[open] > .title .dropdown.icon,
 .ui.accordion .active.title .dropdown.icon,
 .ui.accordion .accordion .active.title .dropdown.icon {
   transform: @activeIconTransform;
@@ -123,8 +128,8 @@
     background: @styledBackground;
     box-shadow: @styledBoxShadow;
   }
-  .ui.styled.accordion .title,
-  .ui.styled.accordion .accordion .title {
+  .ui.styled.accordion > .title,
+  .ui.styled.accordion .accordion > .title {
     margin: @styledTitleMargin;
     padding: @styledTitlePadding;
     color: @styledTitleColor;
@@ -133,43 +138,40 @@
     transition: @styledTitleTransition;
   }
   .ui.styled.accordion > .title:first-child,
-  .ui.styled.accordion .accordion .title:first-child {
+  .ui.styled.accordion .accordion > .title:first-child {
     border-top: none;
   }
 
 
   /* Content */
-  .ui.styled.accordion .content,
-  .ui.styled.accordion .accordion .content {
+  .ui.styled.accordion > .content {
     margin: @styledContentMargin;
     padding: @styledContentPadding;
   }
-  .ui.styled.accordion .accordion .content {
+  .ui.styled.accordion .accordion > .content {
     margin: @styledChildContentMargin;
     padding: @styledChildContentPadding;
   }
 
 
   /* Hover */
-  .ui.styled.accordion .title:hover,
-  .ui.styled.accordion .active.title,
-  .ui.styled.accordion .accordion .title:hover,
-  .ui.styled.accordion .accordion .active.title {
+  .ui.styled.accordion > .title:hover {
     background: @styledTitleHoverBackground;
     color: @styledTitleHoverColor;
   }
-  .ui.styled.accordion .accordion .title:hover,
-  .ui.styled.accordion .accordion .active.title {
+  .ui.styled.accordion .accordion > .title:hover {
     background: @styledHoverChildTitleBackground;
     color: @styledHoverChildTitleColor;
   }
 
 
   /* Active */
+  .ui.styled.accordion[open] > .title,
   .ui.styled.accordion .active.title {
     background: @styledActiveTitleBackground;
     color: @styledActiveTitleColor;
   }
+  .ui.styled.accordion .accordion[open] > .title,
   .ui.styled.accordion .accordion .active.title {
     background: @styledActiveChildTitleBackground;
     color: @styledActiveChildTitleColor;
@@ -182,7 +184,9 @@
   ---------------*/
 
   /* Default Styling */
-  .ui.compact.accordion:not(.styled) .title {
+
+  .ui.compact.accordion:not(.styled) > .title,
+  .ui.compact.accordion:not(.styled) .accordion > .title {
     padding: @titlePaddingCompact;
   }
 
@@ -192,8 +196,9 @@
   }
 
   /* Styled */
-  .ui.compact.styled.accordion .title,
-  .ui.compact.styled.accordion .accordion .title {
+
+  .ui.compact.styled.accordion > .title,
+  .ui.compact.styled.accordion .accordion > .title {
     padding: @styledTitlePaddingCompact;
   }
 
@@ -201,12 +206,14 @@
   .ui.compact.styled.accordion .accordion .title ~ .content {
     padding: @styledContentPaddingCompact;
   }
-
+}
   /*--------------
     Very Compact
   ---------------*/
 
-  .ui[class*="very compact"].accordion:not(.styled) .title {
+& when (@variationAccordionVeryCompact) {
+  .ui[class*="very compact"].accordion:not(.styled) > .title,
+  .ui[class*="very compact"].accordion:not(.styled) .accordion > .title {
     padding: @titlePaddingVeryCompact;
   }
 
@@ -215,8 +222,8 @@
     padding: @contentPaddingVeryCompact;
   }
 
-  .ui[class*="very compact"].styled.accordion .title,
-  .ui[class*="very compact"].styled.accordion .accordion .title {
+  .ui[class*="very compact"].styled.accordion > .title,
+  .ui[class*="very compact"].styled.accordion .accordion > .title {
     padding: @styledTitlePaddingVeryCompact;
   }
 
@@ -235,8 +242,8 @@
    Not Active
 ---------------*/
 
-.ui.accordion .title ~ .content:not(.active),
-.ui.accordion .accordion .title ~ .content:not(.active) {
+.ui.accordion:not(details) .title ~ .content:not(.active),
+.ui.accordion .accordion:not(details) .title ~ .content:not(.active) {
   display: none;
 }
 
@@ -260,9 +267,103 @@
        Inverted
   ---------------*/
 
-  .ui.inverted.accordion .title {
+  .ui.inverted.accordion.menu .item > .title,
+  .ui.inverted.accordion > .title,
+  .ui.inverted.accordion .accordion > .title {
     color: @invertedTitleColor;
   }
+  & when (@variationAccordionStyled) {
+    .ui.inverted.styled.accordion,
+    .ui.inverted.styled.accordion .accordion {
+      background: @invertedStyledBackground;
+      box-shadow: @invertedStyledBoxShadow;
+    }
+    .ui.inverted.styled.accordion > .title,
+    .ui.inverted.styled.accordion .accordion > .title {
+      color: @invertedStyledTitleColor;
+      border-top: @invertedStyledTitleBorder;
+    }
+
+    /* Hover */
+    .ui.inverted.styled.accordion > .title:hover {
+      background: @invertedStyledTitleHoverBackground;
+      color: @invertedStyledTitleHoverColor;
+    }
+    .ui.inverted.styled.accordion .accordion > .title:hover {
+      background: @invertedStyledHoverChildTitleBackground;
+      color: @invertedStyledHoverChildTitleColor;
+    }
+
+    /* Active */
+    .ui.inverted.styled.accordion[open] > .title,
+    .ui.inverted.styled.accordion .active.title {
+      background: @invertedStyledActiveTitleBackground;
+      color: @invertedStyledActiveTitleColor;
+    }
+    .ui.inverted.styled.accordion .accordion[open] > .title,
+    .ui.inverted.styled.accordion .accordion .active.title {
+      background: @invertedStyledActiveChildTitleBackground;
+      color: @invertedStyledActiveChildTitleColor;
+    }
+  }
+}
+
+& when (@variationAccordionBasicStyled) {
+  .ui.basic.styled.accordion,
+  .ui.basic.styled.accordion .accordion {
+    background: transparent;
+    box-shadow: none;
+  }
+  .ui.basic.styled.accordion > .title,
+  .ui.basic.styled.accordion .accordion > .title {
+    border: none;
+    color: @basicStyledTitleColor;
+  }
+  .ui.basic.styled.accordion > .title:hover,
+  .ui.basic.styled.accordion .accordion > .title:hover {
+    background: transparent;
+    color: @basicStyledTitleHoverColor;
+  }
+  .ui.basic.styled.accordion[open] > .title,
+  .ui.basic.styled.accordion .active.title,
+  .ui.basic.styled.accordion .accordion[open] > .title,
+  .ui.basic.styled.accordion .accordion .active.title {
+    background: transparent;
+    color: @basicStyledActiveTitleColor;
+  }
+  & when (@variationAccordionInverted) {
+    .ui.inverted.basic.styled.accordion > .title,
+    .ui.inverted.basic.styled.accordion .accordion > .title {
+      background: transparent;
+      color: @invertedBasicStyledTitleColor;
+    }
+    .ui.inverted.basic.styled.accordion > .title:hover,
+    .ui.inverted.basic.styled.accordion .accordion > .title:hover {
+      background: transparent;
+      color: @invertedBasicStyledTitleHoverColor;
+    }
+    .ui.inverted.basic.styled.accordion[open] > .title,
+    .ui.inverted.basic.styled.accordion .active.title,
+    .ui.inverted.basic.styled.accordion .accordion[open] > .title,
+    .ui.inverted.basic.styled.accordion .accordion .active.title {
+      background: transparent;
+      color: @invertedBasicStyledActiveTitleColor;
+    }
+  }
+}
+
+& when (@variationAccordionTree) {
+  .ui.tree.accordion:not(.styled) .title ~ .content,
+  .ui.tree.accordion:not(.styled) .accordion .title ~ .content {
+    padding:@treeContentPadding;
+  }
+  .ui.tree.accordion > .content,
+  .ui.tree.accordion .accordion > .content {
+    margin-left: @treeContentLeftMargin;
+  }
+  .ui.tree.accordion .accordion {
+    margin-top: @treeContentTopMargin;
+  }
 }
 
 .loadUIOverrides();
diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
index 2e289d683d..04adf3192a 100644
--- a/src/themes/default/globals/variation.variables
+++ b/src/themes/default/globals/variation.variables
@@ -478,8 +478,12 @@
 /* Accordion */
 @variationAccordionInverted: true;
 @variationAccordionStyled: true;
+@variationAccordionBasicStyled: true;
 @variationAccordionFluid: true;
 @variationAccordionCompact: true;
+@variationAccordionVeryCompact: true;
+@variationAccordionRightDropdown: true;
+@variationAccordionTree: true;
 
 /* Calendar */
 @variationCalendarInverted: true;
diff --git a/src/themes/default/modules/accordion.variables b/src/themes/default/modules/accordion.variables
index ea8a90455c..1dae8f7ede 100644
--- a/src/themes/default/modules/accordion.variables
+++ b/src/themes/default/modules/accordion.variables
@@ -9,6 +9,7 @@
 @titlePadding: 0.5em 0;
 @titleFontSize: 1em;
 @titleColor: @textColor;
+@titleLineHeight: 1;
 
 /* Icon */
 @iconOpacity: 1;
@@ -25,6 +26,7 @@
 ;
 @iconVerticalAlign: baseline;
 @iconTransform: none;
+@iconTransformRight: @menuIconTransform;
 
 /* Child Accordion */
 @childAccordionMargin: 1em 0 0;
@@ -40,7 +42,7 @@
 
 @menuTitlePadding: 0;
 @menuIconFloat: right;
-@menuIconMargin: @lineHeightOffset 0 0 1em;
+@menuIconMargin: @iconMargin;
 @menuIconTransform: rotate(180deg);
 
 
@@ -97,6 +99,22 @@
 
 /* Inverted */
 @invertedTitleColor: @invertedTextColor;
+@invertedStyledTitleColor: @invertedUnselectedTextColor;
+@invertedStyledBackground: @black;
+@invertedStyledTitleBorder: 1px solid @whiteBorderColor;
+@invertedStyledBoxShadow:
+        @subtleShadow,
+        0 0 0 1px @whiteBorderColor
+;
+@invertedStyledTitleHoverBackground: transparent;
+@invertedStyledTitleHoverColor: @invertedTextColor;
+@invertedStyledActiveTitleBackground: transparent;
+@invertedStyledActiveTitleColor: @invertedSelectedTextColor;
+
+@invertedStyledHoverChildTitleBackground: @invertedStyledTitleHoverBackground;
+@invertedStyledHoverChildTitleColor: @invertedStyledTitleHoverColor;
+@invertedStyledActiveChildTitleBackground: @invertedStyledActiveTitleBackground;
+@invertedStyledActiveChildTitleColor: @invertedStyledActiveTitleColor;
 
 /* Compact */
 @titlePaddingCompact: 0.25em 0;
@@ -112,4 +130,18 @@
 
 /* Styled Very Compact */
 @styledTitlePaddingVeryCompact: 0.1875em 0.25em;
-@styledContentPaddingVeryCompact: 0.125em 0.25em 0.375em;
\ No newline at end of file
+@styledContentPaddingVeryCompact: 0.125em 0.25em 0.375em;
+
+/* Basic Styled */
+@basicStyledTitleColor: @mutedTextColor;
+@basicStyledTitleHoverColor: @textColor;
+@basicStyledActiveTitleColor: @selectedTextColor;
+
+@invertedBasicStyledTitleColor: @invertedMutedTextColor;
+@invertedBasicStyledTitleHoverColor: @invertedTextColor;
+@invertedBasicStyledActiveTitleColor: @invertedSelectedTextColor;
+
+/* Tree */
+@treeContentPadding: 0;
+@treeContentTopMargin: 0;
+@treeContentLeftMargin: 1.7em;