@syncfusion/blazor-themes 20.3.60 → 20.4.38

package/SCSS-Themes/navigations/accordion/tailwind.scss

@@ -14,6 +14,20 @@ $acrdn-icon-font-size: $text-lg !default;
 $acrdn-content-line-height: 1.5 !default;
 $acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
 
+$acrdn-item-hdr-con-lineheight: 22px !default;
+$acrdn-item-selected-first-child-border-top: 1px none $border-light !default;
+$acrdn-item-selected-last-child-border-bottom: 1px solid $border-light !default;
+$acrdn-item-border-radius: 4px 4px 0 0 !default;
+$acrdn-item-margin-top: 0 !default;
+$acrdn-item-nested-panel-item-select-margin: 0 !default;
+$acrdn-item-overflow: hidden !default;
+$acrdn-item-hover-focus-hdr-con-text-decoration: none !default;
+$acrdn-item-hdr-border-radius: 0 !default;
+$acrdn-item-hdr-margin-bottom: 0 !default;
+$acrdn-item-tgl-icon-display: table !default;
+$acrdn-item-arrow-icon-font-size: 18px !default;
+$acrdn-opacity: .5 !default;
+
 // Header, Nested header and RTL mode Padding
 $acrdn-nest-nrml-header-padding: 8px 0 8px 26px !default;
 $acrdn-nest-bgr-header-padding: 12px 0 12px 28px !default;
@@ -74,12 +88,95 @@ $acrdn-header-active-bg: $content-bg-color-pressed !default;
 
 $acrdn-border-type: solid !default;
 $acrdn-border-size: 1px !default;
+$acrdn-border-radius: 0 !default;
 $acrdn-bgr-arrow-icon-font-size: 22px;
-$acrdn-bgr-icon-font-size: 20px !default;
+$acrdn-bgr-item-header-content-font-size: 16px !default;
 $acrdn-icon-font-size: 18px !default;
-$acrdn-icon-disable-color: $icon-color-disabled;
+$acrdn-item-icon-disable-color: $icon-color-disabled;
 $acrdn-text-disable-color: $content-text-color-disabled;
 
+$acrdn-item-border-color: $acrdn-default-border !default;
+$acrdn-item-border-nav-type: solid !default;
+$acrdn-item-border-size: 0 0 1px 0 !default;
+$acrdn-item-select-last-child-border-bottom: 0 !default;
+$acrdn-item-select-last-child-border-radius: 0 0 4px 4px !default;
+$acrdn-item-first-child-hdr-focus-border-radius: 0 !default;
+$acrdn-item-last-child-border-bottom: 1px solid $acrdn-default-border !default;
+$acrdn-item-last-child-not-exp-hdr-focus-border-radius: 0 !default;
+$acrdn-item-focus-border-color: $acrdn-default-border !default;
+$acrdn-item-focus-border-size: 0 0 1px 0 !default;
+$acrdn-item-focus-selected-exp-border-top: 1px none $acrdn-default-border !default;
+$acrdn-item-focus-selected-exp-hdr-focus-border-color: $acrdn-default-border !default;
+$acrdn-item-focus-selected-exp-hdr-focus-border-type: solid !default;
+$acrdn-item-focus-selected-exp-hdr-focus-border-size: 0 !default;
+$acrdn-item-focus-exp-hdr-hover-focus-bg-color: $content-bg-color-hover !default;
+$acrdn-item-focus-exp-hdr-hover-focus-color:$acrdn-selected-header-font-color !default;
+$acrdn-item-focus-selected-hdr-icons-font: $acrdn-selected-icon-color !default;
+$acrdn-item-focus-exp-hdricon-hover-font: $acrdn-selected-header-font-color !default;
+$acrdn-item-focus-selected-exp-border-color: $acrdn-default-border !default;
+$acrdn-item-exp-select-border-color: $acrdn-default-border !default;
+$acrdn-item-exp-select-border-size: 0 0 1px 0 !default;
+$acrdn-item-header-border: 0 !default;
+$acrdn-item-select-exp-hdr-con-disable-font: $content-text-color-disabled !default;
+$acrdn-item-header-content-disable-color: $content-text-color !default;
+$acrdn-item-hdr-con-text-disabled-font: $content-text-color-disabled !default;
+$acrdn-item-selected-exp-hdr-focus-border-color: $acrdn-default-border !default;
+$acrdn-item-selected-exp-hdr-focus-border-type: solid !default;
+$acrdn-item-selected-exp-hdr-focus-border-size: 0 !default;
+$acrdn-item-selected-exp-hdr-focus-bg: $content-bg-color-focus !default;
+$acrdn-item-selected-exp-hdr-hover-bg: $content-bg-color !default;
+$acrdn-item-selected-exp-hdr-active-bg: $content-bg-color !default;
+$acrdn-item-nes-pan-con-last-child-border-bottom: 1px none $acrdn-selected-border-color !default;
+$acrdn-item-select-bg: none !default;
+$acrdn-item-select-border-color: $acrdn-selected-border-color !default;
+$acrdn-item-select-border-size: 0 0 1px 0 !default;
+$acrdn-item-panel-content-select-bg: none !default;
+$acrdn-item-panel-content-select-border-top: 0 !default;
+$acrdn-item-header-hover-border: 0 !default;
+$acrdn-item-header-hover-bg: $content-bg-color-focus !default;
+$acrdn-item-header-hover-border-color: initial !default;
+$acrdn-item-header-active-border: 0 !default;
+$acrdn-item-header-active-border-color: initial !default;
+$acrdn-item-header-focus-border: 0 !default;
+$acrdn-item-header-focus-box-shadow: none !default;
+$acrdn-item-header-focus-bg: $content-bg-color-focus !default;
+$acrdn-item-header-focus-active-color: $content-text-color !default;
+$acrdn-item-select-exp-hdr-hover-color: $content-text-color !default;
+$acrdn-item-selected-exp-hdr-border-color: initial !default;
+$acrdn-item-selected-exp-hdr-border-size: 0 !default;
+$acrdn-item-selected-exp-hdr-bg: $content-bg-color !default;
+$acrdn-item-selected-exp-hdr-hover-color: $primary !default;
+$acrdn-item-selected-exp-hdr-hover-focus-color: $primary !default;
+$acrdn-item-selected-exp-hdr-icon-color: $primary !default;
+$acrdn-item-selected-exp-hdr-hover-border-color: initial !default;
+$acrdn-item-selected-tgl-icon-color: $primary !default;
+$acrdn-item-selected-hdr-font: $primary !default;
+$acrdn-item-select-hdr-focus-border-color: $acrdn-selected-border-color !default;
+$acrdn-item-selected-border-color: $acrdn-selected-border-color !default;
+$acrdn-item-selected-border-size: 0 0 1px 0 !default;
+$acrdn-item-selected-select-last-border-bottom: 1px none $acrdn-selected-border-color !default;
+$acrdn-item-selected-selected-border-color: $acrdn-selected-border-color !default;
+$acrdn-item-selected-selected-border-size: 0 0 1px 0 !default;
+$acrdn-item-selected-header-background: none !default;
+$acrdn-item-selected-hdr-border-color: initial !default;
+$acrdn-item-selected-hdr-border-size: 0 !default;
+$acrdn-item-selected-header-border-radius: 0 !default;
+$acrdn-item-selected-hdr-con-font: $content-text-color !default;
+$acrdn-item-selected-select-border-color: $acrdn-selected-border-color !default;
+$acrdn-item-selected-select-border-size: 0 0 1px 0 !default;
+$acrdn-item-selected-hdr-icon-font: $icon-color !default;
+$acrdn-item-selected-exp-hdr-con-hover-color: $primary !default;
+$acrdn-item-selected-exp-hdr-icon-hover-color: $primary !default;
+$acrdn-item-selected-select-active-bg: $content-bg-color !default;
+$acrdn-item-nes-pan-exp-hdr-color: $primary !default;
+$acrdn-item-selected-hdr-hover-border-color: initial !default;
+$acrdn-item-selected-hdr-tgl-icon-hover-font: $icon-color !default;
+$acrdn-item-nes-selected-exp-hover-hdr-icons-font: $primary !default;
+$acrdn-item-nes-selected-exp-hover-hdr-con-font: $primary !default;
+$acrdn-item-exp-not-selected-hdr-focus-bg: $content-bg-color-focus !default;
+$acrdn-item-exp-not-selected-hdr-focus-border: 0 !default;
+$acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
+
 //enddefault
 
 @include export-module('accordion-layout') {
@@ -92,11 +189,7 @@ $acrdn-text-disable-color: $content-text-color-disabled;
 
       .e-acrdn-header .e-acrdn-header-content {
         font-size: $acrdn-header-font-bgr-size;
-
-        @if $acrdn-skin == 'bootstrap4' {
-          line-height: $acrdn-bgr-item-header-content-line-height;
-          vertical-align: middle;
-        }
+        vertical-align: middle;
       }
     }
 
@@ -147,35 +240,22 @@ $acrdn-text-disable-color: $content-text-color-disabled;
           min-height: $acrdn-bgr-header-minheight;
           min-width: $acrdn-bgr-icn-minwidth;
           right: $acrdn-bgr-header-paddingpix;
-
-          @if $acrdn-skin == 'bootstrap4' or $acrdn-skin == 'tailwind' or $acrdn-skin == 'bootstrap5' {
-            font-size: $acrdn-bgr-arrow-icon-font-size;
-          }
+          font-size: $acrdn-bgr-arrow-icon-font-size;
         }
 
         .e-acrdn-header-icon {
           display: inline-block;
           padding: 0 $acrdn-bgr-header-icon-padding 0 0;
 
-          @if $acrdn-skin == 'bootstrap4' or $acrdn-skin == 'tailwind' or $acrdn-skin == 'bootstrap5' {
-            .e-acrdn-icons.e-icons {
-              font-size: $acrdn-bgr-icon-font-size;
-            }
+          .e-acrdn-icons.e-icons {
+            font-size: $acrdn-bgr-arrow-icon-font-size;
           }
         }
       }
 
       .e-acrdn-panel .e-acrdn-content {
         padding: $acrdn-bgr-content-padding;
-
-        @if $acrdn-skin == 'bootstrap4' {
-          font-size: $acrdn-bgr-item-header-content-font-size;
-          line-height: $acrdn-bgr-item-header-content-line-height;
-        }
-
-        @if $acrdn-skin == 'highcontrast' {
-          font-size: 13px;
-        }
+        font-size: $acrdn-bgr-item-header-content-font-size;
       }
     }
 
@@ -227,48 +307,23 @@ $acrdn-text-disable-color: $content-text-color-disabled;
 
     .e-acrdn-item {
 
-      @if $acrdn-skin == 'material' {
-        &.e-select.e-selected:first-child {
-          border-top: 0;
-        }
-
-        &.e-select.e-selected:last-child {
-          border-bottom: 0;
-        }
+      &.e-select.e-selected:first-child {
+        border-top: $acrdn-item-selected-first-child-border-top;
       }
-      @if $acrdn-skin == 'bootstrap' {
-        border-radius: 4px;
-        margin-top: 5px;
-
-        .nested .e-acrdn-item + .e-acrdn-item {
-          margin-top: 0;
-        }
-
-        &:not(.e-select) {
-          margin-top: 5px;
-        }
-
-        &:not(.e-select) + .e-acrdn-item:not(.e-select) {
-          margin-bottom: 0;
-          margin-top: 0;
-        }
 
-        &:not(.e-select) + .e-acrdn-item.e-select {
-          margin-top: 5px;
-        }
+      &.e-select.e-selected:last-child {
+        border-bottom: $acrdn-item-selected-last-child-border-bottom;
       }
+      border-radius: $acrdn-item-border-radius;
+      margin-top: $acrdn-item-margin-top;
 
-      .e-acrdn-panel.e-nested .e-acrdn-header {
-
-        @if $acrdn-skin == 'bootstrap' {
-          border: 0;
-        }
+      &:not(.e-select) + .e-acrdn-item:not(.e-select) {
+        margin-bottom: 0;
+        margin-top: 0;
       }
 
-      @if $acrdn-skin == 'bootstrap' {
-        .e-acrdn-panel.e-nested .e-acrdn-item.e-select {
-          margin: 2px;
-        }
+      .e-acrdn-panel.e-nested .e-acrdn-item.e-select {
+        margin: $acrdn-item-nested-panel-item-select-margin;
       }
 
       > .e-acrdn-header .e-acrdn-header-content {
@@ -289,9 +344,7 @@ $acrdn-text-disable-color: $content-text-color-disabled;
     }
 
     .e-acrdn-item {
-      @if $acrdn-skin != 'bootstrap5' {
-        overflow: hidden;
-      }
+      overflow: $acrdn-item-overflow;
       padding-top: $acrdn-item-padding-size;
       position: relative;
 
@@ -314,18 +367,14 @@ $acrdn-text-disable-color: $content-text-color-disabled;
           &:hover,
           &:focus {
             .e-acrdn-header-content {
-              @if $acrdn-skin == 'bootstrap' or $acrdn-skin == 'bootstrap4'  {
-                text-decoration: underline;
-              }
+              text-decoration: $acrdn-item-hover-focus-hdr-con-text-decoration;
             }
           }
         }
       }
 
       .e-acrdn-header {
-        @if $acrdn-skin == 'bootstrap' {
-          border-radius: 4px;
-        }
+        border-radius: $acrdn-item-hdr-border-radius;
         line-height: $acrdn-nrml-header-lineheight;
         min-height: $acrdn-nrml-header-minheight;
         overflow: hidden;
@@ -333,28 +382,18 @@ $acrdn-text-disable-color: $content-text-color-disabled;
         text-decoration: none;
         text-overflow: ellipsis;
         white-space: nowrap;
-
-        @if $acrdn-skin == 'bootstrap5' {
-          margin-bottom: 4px;
-        }
+        margin-bottom: $acrdn-item-hdr-margin-bottom;
 
         > * {
           display: inline-block;
         }
 
-        @if $acrdn-skin == 'bootstrap4' {
-          .e-acrdn-header-content {
-            line-height: $acrdn-content-line-height;
-          }
+        .e-acrdn-header-content {
+          line-height: $acrdn-item-hdr-con-lineheight;
         }
 
         .e-toggle-icon {
-          @if $acrdn-skin == 'bootstrap' {
-            display: none;
-          }
-          @else {
-            display: table;
-          }
+          display: $acrdn-item-tgl-icon-display;
           font-size: $acrdn-icon-font-size;
           height: $acrdn-nrml-header-minheight;
           min-height: $acrdn-nrml-header-minheight;
@@ -378,16 +417,8 @@ $acrdn-text-disable-color: $content-text-color-disabled;
           display: inline-block;
           padding: 0 $acrdn-nrml-header-icon-padding 0 0;
 
-          @if $acrdn-skin == 'bootstrap4' {
-            .e-acrdn-icons.e-icons {
-              font-size: $acrdn-bgr-arrow-icon-font-size;
-            }
-          }
-
-          @if $acrdn-skin == 'tailwind' or $acrdn-skin == 'bootstrap5' {
-            .e-acrdn-icons.e-icons {
-              font-size: $acrdn-icon-font-size;
-            }
+          .e-acrdn-icons.e-icons {
+            font-size: $acrdn-item-arrow-icon-font-size;
           }
         }
       }
@@ -508,145 +539,116 @@ $acrdn-text-disable-color: $content-text-color-disabled;
     -webkit-tap-highlight-color: $acrdn-tab-highlight-color;
     background: $acrdn-default-bg-color;
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
-
-    @if ($acrdn-skin == 'bootstrap4' or $acrdn-skin == 'bootstrap5' or $acrdn-skin == 'FluentUI') {
-      border-radius: $acrdn-border-radius;
-    }
+    border-radius: $acrdn-border-radius;
 
     .e-active {
       background: $acrdn-active-bg-color;
     }
 
     .e-acrdn-item {
-      @if $acrdn-skin == 'fabric' {
-        border-bottom: 1px solid $acrdn-item-border-color;
-        border-top: 1px solid $acrdn-item-border-color;
-      }
+      border-color: $acrdn-item-border-color;
+      border-style: $acrdn-item-border-nav-type;
+      border-width: $acrdn-item-border-size;
+      border-radius: $acrdn-item-border-radius;
 
-      @if $acrdn-skin == 'bootstrap4' or $acrdn-skin == 'tailwind' {
-        border-bottom: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
-        border-radius: 4px 4px 0 0;
+      &.e-select:last-child {
+        border-bottom: $acrdn-item-select-last-child-border-bottom;
+        border-radius: $acrdn-item-select-last-child-border-radius;
+      }
 
-        &.e-select:last-child {
-          border-bottom: 0;
-          border-radius: 0 0 4px 4px;
-        }
+      &:first-child .e-acrdn-header:focus {
+        border-radius: $acrdn-item-first-child-hdr-focus-border-radius;
       }
 
-      @if $acrdn-skin == 'bootstrap5' {
-        border-bottom: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
+      &:last-child {
+        border-bottom: $acrdn-item-last-child-border-bottom;
 
-        &:first-child .e-acrdn-header:focus {
-          border-radius: 4px 4px 0 0;
+        &:not(.e-expand-state) .e-acrdn-header:focus {
+          border-radius: $acrdn-item-last-child-not-exp-hdr-focus-border-radius;
         }
 
-        &:last-child {
-          border-bottom: 0;
-
-          &:not(.e-expand-state) .e-acrdn-header:focus {
-            border-radius: 0 0 4px 4px;
-          }
-
-          &.e-selected .e-acrdn-header:focus {
-            border-radius: 0;
-          }
+        &.e-selected .e-acrdn-header:focus {
+          border-radius: $acrdn-item-hdr-border-radius;
         }
       }
 
       &.e-item-focus {
-        @if $acrdn-skin == 'fabric' {
-          border-bottom: 1px solid $acrdn-header-focus-bg;
-          border-top: 1px solid $acrdn-header-focus-bg;
-        }
-
-        @if $acrdn-skin == 'highcontrast' {
-          .e-acrdn-header:focus {
-            border-color: $acrdn-focus-hdr-focus-border-color;
-          }
-        }
+        border-color: $acrdn-item-focus-border-color;
+        border-style: $acrdn-item-border-nav-type;
+        border-width: $acrdn-item-focus-border-size;
       }
 
       &.e-item-focus.e-select.e-selected.e-expand-state {
-        @if $acrdn-skin == 'fabric' or $acrdn-skin == 'material' {
-          border-top: 1px solid $acrdn-selected-header-color;
+        border-top: $acrdn-item-focus-selected-exp-border-top;
+
+        .e-acrdn-header:focus {
+          border-color: $acrdn-item-focus-selected-exp-hdr-focus-border-color;
+          border-style: $acrdn-item-focus-selected-exp-hdr-focus-border-type;
+          border-width: $acrdn-item-focus-selected-exp-hdr-focus-border-size;
         }
 
-        @if $acrdn-skin == 'highcontrast' {
-          .e-acrdn-header:focus {
-            border: 2px dashed $acrdn-focus-exp-hdr-focus-border-color;
+        .e-acrdn-header:hover:focus {
+          background: $acrdn-item-focus-exp-hdr-hover-focus-bg-color;
+
+          .e-acrdn-header-content {
+            color: $acrdn-item-focus-exp-hdr-hover-focus-color;
           }
 
-          .e-acrdn-header:hover:focus {
-            background: $acrdn-focus-exp-hdr-hover-focus-bg-color;
-            border-color: $acrdn-focus-exp-hdr-hover-focus-border-color;
+          .e-icons {
+            color: $acrdn-item-focus-selected-hdr-icons-font;
+          }
 
-            .e-icons,
-            .e-acrdn-header-content {
-              color: $acrdn-focus-exp-hdr-hover-focus-color;
-            }
+          .e-acrdn-header-icon .e-icons {
+            color: $acrdn-item-focus-exp-hdricon-hover-font;
           }
         }
       }
 
       &.e-item-focus.e-expand-state.e-select,
       &.e-item-focus.e-select.e-selected.e-expand-state  {
-        @if $acrdn-skin == 'material' {
-          border-color: $acrdn-header-focus-bg;
-        }
+        border-color: $acrdn-item-focus-selected-exp-border-color;
       }
 
       &.e-expand-state.e-select {
-        @if $acrdn-skin == 'fabric' or $acrdn-skin == 'material' {
-          border-bottom: 1px solid $acrdn-selected-header-color;
-          border-top: 1px solid $acrdn-selected-header-color;
-        }
+        border-color: $acrdn-item-exp-select-border-color;
+        border-style: $acrdn-item-border-nav-type;
+        border-width: $acrdn-item-exp-select-border-size;
       }
 
       .e-acrdn-header {
-        @if $acrdn-skin == 'fabric' {
-          border: 1px solid $acrdn-item-header-border-color;
-        }
+        border: $acrdn-item-header-border;
       }
 
-      @if $acrdn-skin == 'bootstrap4' {
-        &.e-overlay.e-select.e-expand-state {
-          .e-acrdn-header {
-            .e-icons,
-            .e-acrdn-header-content {
-              color: $acrdn-disable-color;
-            }
+      &.e-overlay.e-select.e-expand-state {
+        .e-acrdn-header {
+          .e-icons,
+          .e-acrdn-header-content {
+            color: $acrdn-item-select-exp-hdr-con-disable-font;
           }
         }
       }
 
       &.e-overlay {
         background: $acrdn-bg-color;
+        opacity: $acrdn-opacity;
 
-        @if $acrdn-skin == 'bootstrap4' {
-          opacity: $acrdn-opacity;
-        }
-
-        @if $acrdn-skin == 'highcontrast' or $acrdn-skin == 'bootstrap4' {
-          .e-acrdn-header {
+        .e-acrdn-header {
 
-            .e-icons,
-            .e-acrdn-header-content {
-              color: $acrdn-disable-color;
-            }
+          .e-icons,
+          .e-acrdn-header-content {
+            color: $acrdn-item-header-content-disable-color;
           }
         }
 
-        @if $acrdn-skin == 'tailwind' or $acrdn-skin == 'bootstrap5' {
-          &.e-overlay.e-select.e-expand-state {
-            .e-acrdn-header {
+        &.e-overlay.e-select.e-expand-state {
+          .e-acrdn-header {
 
-              .e-icons {
-                color: $acrdn-icon-disable-color;
-              }
+            .e-icons {
+              color: $acrdn-item-icon-disable-color;
+            }
 
-              .e-acrdn-header-content {
-                color: $content-text-color-disabled;
-              }
+            .e-acrdn-header-content {
+              color: $acrdn-item-hdr-con-text-disabled-font;
             }
           }
         }
@@ -655,74 +657,51 @@ $acrdn-text-disable-color: $content-text-color-disabled;
       &.e-selected.e-select.e-expand-state > .e-acrdn-header {
 
         &:focus {
-          @if $acrdn-skin == 'fabric' {
-            border: 1px solid $acrdn-item-exp-hdr-focus-border-color;
-          }
-          @else if $acrdn-skin == 'highcontrast' {
-            border: 2px dashed $acrdn-item-exp-hdr-focus-border-color;
-          }
-          @else {
-            background: $acrdn-header-focus-bg;
-          }
+          border-color: $acrdn-item-selected-exp-hdr-focus-border-color;
+          border-style: $acrdn-item-selected-exp-hdr-focus-border-type;
+          border-width: $acrdn-item-selected-exp-hdr-focus-border-size;
+          background: $acrdn-item-selected-exp-hdr-focus-bg;
         }
 
-        @if $acrdn-skin == 'FluentUI' {
-          &:hover {
-            background: $acrdn-header-hover-bg;
-          }
+        &:hover {
+          background: $acrdn-item-selected-exp-hdr-hover-bg;
+        }
 
-          &:active {
-            background: $acrdn-header-active-bg;
-          }
+        &:active {
+          background: $acrdn-item-selected-exp-hdr-active-bg;
         }
       }
 
       .e-acrdn-panel.e-nested {
 
-        @if $acrdn-skin == 'bootstrap4' or $acrdn-skin == 'tailwind' or $acrdn-skin == 'bootstrap5' {
-          .e-acrdn-content .e-acrdn-item:last-child {
-            border-bottom: $acrdn-border-size $acrdn-selected-border-type $acrdn-default-border;
+        .e-acrdn-item.e-select {
+          &.e-selected.e-expand-state > .e-acrdn-header,
+          &.e-expand-state > .e-acrdn-header {
+            .e-acrdn-header-content {
+              color: $acrdn-item-nes-pan-exp-hdr-color;
+            }
           }
         }
 
-        .e-acrdn-header .e-acrdn-header-content {
-          color: $acrdn-header-font;
+        .e-acrdn-content .e-acrdn-item:last-child {
+          border-bottom: $acrdn-item-nes-pan-con-last-child-border-bottom;
         }
 
-        @if $acrdn-skin == 'highcontrast' {
-          .e-expand-state {
-            > .e-icons,
-            > .e-acrdn-header-content {
-              color: $acrdn-nested-exp-color;
-            }
-          }
+        .e-acrdn-header .e-acrdn-header-content {
+          color: $acrdn-header-font;
         }
       }
 
       &.e-select {
-
-        @if $acrdn-skin == 'bootstrap' {
-          background: $acrdn-item-select-bg;
-          border: $acrdn-border-size solid $acrdn-default-border;
-        }
+        background: $acrdn-item-select-bg;
+        border-color: $acrdn-item-select-border-color;
+        border-style: $acrdn-item-border-nav-type;
+        border-width: $acrdn-item-select-border-size;
 
         .e-acrdn-panel .e-acrdn-content {
           color: $acrdn-content-color;
-
-          @if $acrdn-skin == 'bootstrap4' {
-            background: $acrdn-item-panel-content-select-bg;
-            border-top: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
-          }
-
-          @if $acrdn-skin == 'highcontrast' {
-            background: $acrdn-selected-item-content-color;
-          }
-        }
-
-        @if $acrdn-skin == 'material' {
-          .e-acrdn-panel .e-acrdn-content .e-content-icon {
-            color: $acrdn-icon-color;
-          }
+          background: $acrdn-item-panel-content-select-bg;
+          border-top: $acrdn-item-panel-content-select-border-top;
         }
       }
 
@@ -740,70 +719,37 @@ $acrdn-text-disable-color: $content-text-color-disabled;
       &.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header {
 
         &:focus {
-          @if $acrdn-skin == 'fabric' {
-            border: 1px solid $acrdn-item-exp-hdr-focus-border-color;
-          }
-          @else if $acrdn-skin == 'highcontrast' {
-            border-color: $acrdn-item-exp-hdr-focus-border-color;
-          }
-          @else if $acrdn-skin != 'bootstrap5' {
-            background: $acrdn-header-focus-bg;
-          }
+          background: $acrdn-item-exp-not-selected-hdr-focus-bg;
+          border: $acrdn-item-exp-not-selected-hdr-focus-border;
+          border-color: $acrdn-item-exp-not-selected-hdr-focus-border-color;
         }
       }
 
       .e-acrdn-header {
 
-        @if $acrdn-skin == 'highcontrast' {
-          border: 1px solid $acrdn-item-header-border-color;
-        }
-
         &:hover {
-          @if $acrdn-skin == 'fabric' {
-            border: 1px solid $acrdn-header-hover-bg;
-          }
-          @if $acrdn-skin != 'bootstrap5' {
-            background: $acrdn-header-hover-bg;
-          }
-          @if $acrdn-skin == 'highcontrast' {
-            border-color: $acrdn-item-header-hover-border-color;
-          }
+          border: $acrdn-item-header-hover-border;
+          background: $acrdn-item-header-hover-bg;
+          border-color: $acrdn-item-header-hover-border-color;
         }
 
         &:active {
-          @if $acrdn-skin == 'fabric' {
-            border: 1px solid $acrdn-header-active-bg;
-          }
+          border: $acrdn-item-header-active-border;
+          border-color: $acrdn-item-header-active-border-color;
           background: $acrdn-header-active-bg;
-          @if $acrdn-skin == 'highcontrast' {
-            border-color: $acrdn-item-header-active-border-color;
-          }
         }
 
         &:focus {
-          @if ($acrdn-skin == 'fabric') {
-            border: 1px solid $acrdn-item-header-focus-border-color;
-          }
-          @if $acrdn-skin == 'bootstrap5' {
-            box-shadow: $shadow-focus-ring1;
-          }
-          @else {
-            background: $acrdn-header-focus-bg;
-            @if $acrdn-skin == 'FluentUI' {
-              border: 1px solid $acrdn-selected-header-font-color;
-            }
-          }
-          @if $acrdn-skin == 'highcontrast' {
-            background: $acrdn-item-header-focus-bg-color;
-            border: 2px dashed $acrdn-item-header-focus-border-color;
+          border: $acrdn-item-header-focus-border;
+          box-shadow: $acrdn-item-header-focus-box-shadow;
+          background: $acrdn-item-header-focus-bg;
 
-            &:active {
+          &:active {
 
-              .e-icons,
-              .e-acrdn-header-content,
-              .e-toggle-icon {
-                color: $acrdn-item-header-focus-active-color;
-              }
+            .e-icons,
+            .e-acrdn-header-content,
+            .e-toggle-icon {
+              color: $acrdn-item-header-focus-active-color;
             }
           }
         }
@@ -811,219 +757,143 @@ $acrdn-text-disable-color: $content-text-color-disabled;
 
       &.e-select {
 
-        @if $acrdn-skin == 'bootstrap4' {
-          &.e-acrdn-item > .e-acrdn-header {
-            &:hover {
-              .e-icons,
-              .e-acrdn-header-content {
-                color: $acrdn-exp-hdr-hover-color;
-              }
-
-              &:focus .e-icons,
-              &:focus .e-acrdn-header-content {
-                color: $acrdn-exp-hdr-hover-focus-hdr-color;
-              }
+        &.e-acrdn-item > .e-acrdn-header {
+          &:hover {
+            .e-acrdn-header-content {
+              color: $acrdn-item-select-exp-hdr-hover-color;
+            }
+
+            .e-icons {
+              color: $acrdn-item-selected-hdr-icon-font;
             }
-          }
 
-          &.e-selected > .e-acrdn-header {
-            background: $acrdn-selected-header-color;
+            .e-toggle-icon .e-icons.e-tgl-collapse-icon {
+              color: $acrdn-item-selected-hdr-tgl-icon-hover-font;
+            }
+
+            &:focus .e-icons,
+            &:focus .e-acrdn-header-content {
+              color: $acrdn-item-header-focus-active-color;
+            }
           }
         }
 
         &.e-selected.e-expand-state > .e-acrdn-header,
         &.e-expand-state > .e-acrdn-header {
-          @if $acrdn-skin == 'fabric' {
-            border: 1px solid $acrdn-selected-header-color;
-          }
-
-          @if $acrdn-skin != 'bootstrap5' {
-            background: $acrdn-selected-header-color;
-          }
+          border-color: $acrdn-item-selected-exp-hdr-border-color;
+          border-style: $acrdn-item-border-nav-type;
+          border-width: $acrdn-item-selected-exp-hdr-border-size;
+          background: $acrdn-item-selected-exp-hdr-bg;
 
-          @if $acrdn-skin == 'bootstrap4' {
-            &:hover {
-              .e-icons,
-              .e-acrdn-header-content {
-                color: $acrdn-exp-hdr-hover-color;
-              }
-
-              &:focus .e-icons,
-              &:focus .e-acrdn-header-content {
-                color: $acrdn-exp-hdr-hover-focus-hdr-color;
-              }
+          &:hover {
+            .e-icons {
+              color: $acrdn-item-selected-exp-hdr-hover-color;
             }
-          }
-
-          @if $acrdn-skin == 'highcontrast' {
-            background: $acrdn-exp-hdr-bg-color;
-            border-color: $acrdn-exp-hdr-border-color;
 
-            .e-acrdn-header-icon {
-              color: $acrdn-exp-hdr-icon-color;
+            .e-acrdn-header-icon .e-icons {
+              color: $acrdn-item-selected-exp-hdr-icon-hover-color;
             }
 
-            &:hover {
-              background: $acrdn-exp-hdr-hover-bg-color;
-              border-color: $acrdn-exp-hdr-hover-border-color;
-
-              .e-icons,
-              .e-acrdn-header-content {
-                color: $acrdn-exp-hdr-hover-color;
-              }
-
-              &:focus .e-icons,
-              &:focus .e-acrdn-header-content {
-                color: $acrdn-exp-hdr-hover-focus-hdr-color;
-              }
+            .e-acrdn-header-content {
+              color: $acrdn-item-selected-exp-hdr-con-hover-color;
             }
-          }
 
-          @if $acrdn-skin != 'bootstrap5' {
-            > .e-toggle-icon {
-              color: $acrdn-selected-icon-color;
+            &:focus .e-icons,
+            &:focus .e-acrdn-header-content {
+              color: $acrdn-item-selected-exp-hdr-hover-focus-color;
             }
+          }
 
-            .e-acrdn-header-icon,
-            .e-acrdn-header-content {
-              color: $acrdn-selected-header-font-color;
-            }
+          .e-acrdn-header-icon {
+            color: $acrdn-item-selected-exp-hdr-icon-color;
           }
-        }
 
-        &.e-expand-state > .e-acrdn-header:hover:focus {
-          @if $acrdn-skin == 'highcontrast' {
-            .e-icons,
-            .e-acrdn-header-content {
-              color: $acrdn-exp-hdr-hover-focus-color;
-            }
+          &:hover {
+            border-color: $acrdn-item-selected-exp-hdr-hover-border-color;
           }
-        }
-      }
 
-      &.e-select {
-        @if $acrdn-skin == 'material' {
-          border-bottom: $acrdn-selected-border-size $acrdn-selected-border-type transparent;
-          border-top: $acrdn-selected-border-size $acrdn-selected-border-type transparent;
+          > .e-toggle-icon {
+            color: $acrdn-item-selected-tgl-icon-color;
+          }
 
-          &.e-item-focus {
-            border-color: $acrdn-header-focus-bg;
+          .e-acrdn-header-icon,
+          .e-acrdn-header-content {
+            color: $acrdn-item-selected-hdr-font;
           }
         }
+      }
 
-        @if $acrdn-skin == 'highcontrast' {
-          &.e-expand-state .e-acrdn-header:hover {
-            border-color: $acrdn-exp-hdr-hover-border-color;
-
-            .e-icons,
-            .e-acrdn-header-content {
-              color: $acrdn-exp-hdr-hover-color;
-            }
-          }
+      &.e-select {
+        &.e-item-focus {
+          border-color: $acrdn-item-select-hdr-focus-border-color;
         }
       }
 
       &.e-selected {
-        @if $acrdn-skin == 'bootstrap' {
-          border: $acrdn-border-size solid $acrdn-default-border;
-        }
-        @else {
-          &.e-select {
-            border-bottom: $acrdn-selected-border-size $acrdn-selected-border-type  $acrdn-selected-border-color;
-            border-top: $acrdn-selected-border-size $acrdn-selected-border-type  $acrdn-selected-border-color;
+        border-color: $acrdn-item-selected-border-color;
+        border-style: $acrdn-item-border-nav-type;
+        border-width: $acrdn-item-selected-border-size;
 
-            @if $acrdn-skin == 'bootstrap4' or $acrdn-skin == 'tailwind' or $acrdn-skin == 'bootstrap5' {
-              border-bottom: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
+        &.e-select {
+          border-color: $acrdn-item-selected-select-border-color;
+          border-style: $acrdn-item-border-nav-type;
+          border-width: $acrdn-item-selected-select-border-size;
 
-              &.e-select:last-child {
-                border-bottom: $acrdn-border-size $acrdn-selected-border-type $acrdn-default-border;
-              }
-            }
+          &.e-active {
+            background: $acrdn-item-selected-select-active-bg;
           }
-        }
-
-        @if $acrdn-skin == 'bootstrap5' {
-          > .e-acrdn-header {
-            background: $acrdn-header-focus-bg;
-            border-bottom: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
-
-            > .e-toggle-icon,
-            > .e-acrdn-header-content {
-              color: $acrdn-selected-header-font-color;
-            }
 
-            &:focus {
-              box-shadow: $shadow-focus-ring1;
-            }
+          &.e-select:last-child {
+            border-bottom: $acrdn-item-selected-select-last-border-bottom;
           }
         }
 
-        + .e-selected {
-          @if $acrdn-skin == 'bootstrap' {
-            border: $acrdn-border-size solid $acrdn-default-border;
+        > .e-acrdn-header {
+
+          > .e-acrdn-header-content {
+            color: $acrdn-item-selected-hdr-con-font;
           }
-          @if $acrdn-skin == 'material' {
-            border-top: $acrdn-selected-border-size solid  transparent;
+
+          > .e-toggle-icon {
+            color: $acrdn-item-selected-hdr-icon-font;
           }
-          @else {
-            border-top: $acrdn-selected-border-size none  $acrdn-selected-border-color;
+
+          &:focus {
+            box-shadow: $acrdn-item-header-focus-box-shadow;
           }
         }
-        @if $acrdn-skin != 'bootstrap' {
-          .e-selected:last-child {
-            border-bottom: $acrdn-selected-border-size none  $acrdn-selected-border-color;
-          }
+
+        + .e-selected {
+          border-color: $acrdn-item-selected-selected-border-color;
+          border-style: $acrdn-item-border-nav-type;
+          border-width: $acrdn-item-selected-selected-border-size;
         }
 
-        @if $acrdn-skin == 'highcontrast' {
-          .e-acrdn-item.e-selected:not(.e-expand-state) {
-            > .e-acrdn-header .e-icons,
-            > .e-acrdn-header .e-acrdn-header-content {
-              color: $acrdn-nested-selected-item-hdr-color;
+        .e-acrdn-item.e-selected.e-expand-state {
+          &:hover {
+            > .e-acrdn-header .e-icons {
+              color: $acrdn-item-nes-selected-exp-hover-hdr-icons-font;
             }
-          }
 
-          .e-acrdn-item.e-selected.e-expand-state {
-            > .e-acrdn-header .e-icons,
             > .e-acrdn-header .e-acrdn-header-content {
-              color: $acrdn-nested-selected-exp-item-hdr-color;
-            }
-
-            &:hover {
-              > .e-acrdn-header .e-icons,
-              > .e-acrdn-header .e-acrdn-header-content {
-                color: $acrdn-nested-selected-exp-hover-item-hdr-color;
-              }
+              color: $acrdn-item-nes-selected-exp-hover-hdr-con-font;
             }
           }
         }
 
         &.e-select > .e-acrdn-header {
-          @if $acrdn-skin == 'bootstrap' {
-            background: $acrdn-selected-header-color;
-            border: 0;
-            border-bottom: $acrdn-border-size solid $acrdn-default-border;
-            border-radius: 0;
-          }
+          background: $acrdn-item-selected-header-background;
+          border-radius: $acrdn-item-selected-header-border-radius;
+          border-color: $acrdn-item-selected-hdr-border-color;
+          border-style: $acrdn-item-border-nav-type;
+          border-width: $acrdn-item-selected-hdr-border-size;
 
-          @if $acrdn-skin == 'bootstrap4' {
-            border-radius: 4px;
+          &:focus {
+            background: $acrdn-item-header-focus-bg;
           }
 
-          @if $acrdn-skin == 'highcontrast' {
-
-            &:focus {
-              border: 2px dashed $acrdn-selected-hdr-focus-border-color;
-            }
-
-            &:hover {
-              border-color: $acrdn-selected-hdr-hover-border-color;
-
-              .e-icons,
-              .e-acrdn-header-content {
-                color: $acrdn-selected-hdr-hover-color;
-              }
-            }
+          &:hover {
+            border-color: $acrdn-item-selected-hdr-hover-border-color;
           }
         }