@design-factory/design-factory 15.2.3 → 16.0.1

package/styles/scss/components/select/_select.scss

@@ -1,5 +1,23 @@
+@use 'sass:map';
+
 /* Native select */
 .form-select {
+  --#{$prefix}box-shadow-color: #{$input-focus-border-color};
+  --#{$prefix}select-disabled-cursor: #{$df-select-disabled-cursor};
+  --#{$prefix}select-indicator-disabled: #{$df-select-indicator-disabled};
+
+  @each $state, $data in $form-validation-states {
+    &.is-#{$state} {
+      $colorName: map.get($df-form-validation-states-names, $state);
+      @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'border-color')};
+      } @else {
+        --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
+        --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity($colorName, 'border-color')}
+      }
+    }
+  }
+
   &:focus {
     // override
     border-color: $input-focus-border-color;
@@ -16,18 +34,18 @@
 
   &:disabled {
     // override
-    cursor: $df-select-disabled-cursor;
+    cursor: var(--#{$prefix}select-disabled-cursor);
   }
 
   &:not([multiple]):disabled {
     // override
     @include ltr {
-      background: $form-select-disabled-bg $df-select-indicator-disabled no-repeat right $form-select-padding-x
+      background: $form-select-disabled-bg var(--#{$prefix}select-indicator-disabled) no-repeat right $form-select-padding-x
         center;
       background-size: $form-select-bg-size;
     }
     @include rtl {
-      background: $form-select-disabled-bg $df-select-indicator-disabled no-repeat left $form-select-padding-x
+      background: $form-select-disabled-bg var(--#{$prefix}select-indicator-disabled) no-repeat left $form-select-padding-x
         center;
       background-size: $form-select-bg-size;
     }
@@ -65,14 +83,14 @@
 }
 
 %df-select-caret-down {
-  color: $df-select-icon-color;
+  color: var(--#{$prefix}select-icon-color);
   speak: none;
-  font-family: $df-select-icon-font-family;
+  font-family: var(--#{$prefix}select-icon-font-family);
   content: $df-select-icon-caret-down;
-  font-weight: $df-select-icon-solid-font-weight;
-  font-size: $df-select-icon-font-size;
-  width: $df-select-arrow-width;
-  height: $df-select-arrow-height;
+  font-weight: var(--#{$prefix}select-icon-solid-font-weight);
+  font-size: var(--#{$prefix}select-icon-font-size);
+  width: var(--#{$prefix}select-arrow-width);
+  height: var(--#{$prefix}select-arrow-height);
 }
 
 // ng-select
@@ -81,6 +99,82 @@
 // TODO make a pull request to the library to deliver scss configurable
 // (this is why I did not add my own $df- variable here currently)
 .ng-select {
+  --#{$prefix}select-single-optionselected-background-color: #{$df-select-single-optionselected-background-color};
+  --#{$prefix}select-optionselected-background-color: #{$df-select-optionselected-background-color};
+  --#{$prefix}select-value-color: #{$df-select-value-color};
+  --#{$prefix}select-option-textdecoration-hover: #{$df-select-option-textdecoration-hover};
+  --#{$prefix}select-option-hover-bg-color: #{$df-select-option-hover-bg-color};
+  --#{$prefix}select-disabled-cursor: #{$df-select-disabled-cursor};
+  --#{$prefix}select-disabled-color: #{$df-select-disabled-color};
+  --#{$prefix}select-disabled-bg: #{$df-select-disabled-bg};
+  --#{$prefix}select-readonly-bg: #{$df-select-readonly-bg};
+  --#{$prefix}select-readonly-color: #{$df-select-readonly-color};
+  --#{$prefix}select-value-lefticon-border-right: #{$df-select-value-lefticon-border-right};
+  --#{$prefix}select-value-righticon-border-left: #{$df-select-value-righticon-border-left};
+  --#{$prefix}select-highlight-color: #{$df-select-highlight-color};
+  --#{$prefix}select-panel-min-width: #{$df-select-panel-min-width};
+  --#{$prefix}select-value-height: #{$df-select-value-height};
+  --#{$prefix}select-value-height-sm: #{$df-select-value-height-sm};
+  --#{$prefix}select-value-height-lg: #{$df-select-value-height-lg};
+  --#{$prefix}select-clear-width: #{$df-select-clear-width};
+  --#{$prefix}select-arrow-pos: #{$df-select-arrow-pos};
+  --#{$prefix}select-arrow-wrapper-width: #{$df-select-arrow-wrapper-width};
+  --#{$prefix}select-arrow-wrapper-height: #{$df-select-arrow-wrapper-height};
+  --#{$prefix}select-arrow-wrapper-margin-left: #{$df-select-arrow-wrapper-margin-left};
+  --#{$prefix}select-arrow-wrapper-margin-right: #{$df-select-arrow-wrapper-margin-right};
+  --#{$prefix}select-arrow-wrapper-hover-background-color: #{$df-select-arrow-wrapper-hover-background-color};
+  --#{$prefix}select-arrow-wrapper-border-radius: #{$df-select-arrow-wrapper-border-radius};
+  --#{$prefix}select-arrow-width: #{$df-select-arrow-width};
+  --#{$prefix}select-arrow-height: #{$df-select-arrow-height};
+  --#{$prefix}select-arrow-text-align: #{$df-select-arrow-text-align};
+  --#{$prefix}select-arrow-text-width: #{$df-select-arrow-text-width};
+  --#{$prefix}select-single-input-padding: #{$df-select-single-input-padding};
+  --#{$prefix}select-single-clear-input-padding: #{$df-select-single-clear-input-padding};
+  --#{$prefix}select-border: #{$df-select-border};
+  --#{$prefix}select-border-radius: #{$df-select-border-radius};
+  --#{$prefix}select-border-radius-sm: #{$df-select-border-radius-sm};
+  --#{$prefix}select-border-radius-lg: #{$df-select-border-radius-lg};
+  --#{$prefix}select-value-margin: #{$df-select-value-margin};
+  --#{$prefix}select-value-margin-sm: #{$df-select-value-margin-sm};
+  --#{$prefix}select-value-margin-lg: #{$df-select-value-margin-lg};
+  --#{$prefix}select-panel-border-radius: #{$df-select-panel-border-radius};
+  --#{$prefix}select-panel-box-shadow: #{$df-select-panel-box-shadow};
+  --#{$prefix}select-optgroup-border: #{$df-select-optgroup-border};
+  --#{$prefix}select-icon-color: #{$df-select-icon-color};
+  --#{$prefix}custom-select-background-rtl: #{$df-custom-select-background-rtl};
+  --#{$prefix}select-option-hover-color: #{$df-select-option-hover-color};
+  --#{$prefix}select-single-optionselected-color: #{$df-select-single-optionselected-color};
+  --#{$prefix}select-icon-solid-font-weight: #{$df-select-icon-solid-font-weight};
+  --#{$prefix}select-icon-font-size: #{$df-select-icon-font-size};
+  --#{$prefix}select-icon-font-family: #{$df-select-icon-font-family};
+  --#{$prefix}select-input-font-weight: #{$df-select-input-font-weight};
+  --#{$prefix}select-spinner-loader-border-left: #{$df-select-spinner-loader-border-left};
+  --#{$prefix}select-value-disabled-bg-color: #{$df-select-value-disabled-bg-color};
+  --#{$prefix}select-value-disabled-border: #{$df-select-value-disabled-border};
+  --#{$prefix}select-not-found-disabled: #{$df-select-not-found-disabled};
+  --#{$prefix}select-option-disabled-color: #{$df-select-option-disabled-color};
+  --#{$prefix}select-clear-button-width: #{$df-select-clear-button-width};
+  --#{$prefix}select-clear-button-height: #{$df-select-clear-button-height};
+  --#{$prefix}select-clear-button-line-height: #{$df-select-clear-button-line-height};
+  --#{$prefix}select-clear-button-display: #{$df-select-clear-button-display};
+  --#{$prefix}select-clear-button-justify-content: #{$df-select-clear-button-justify-content};
+  --#{$prefix}select-clear-button-margin-left: #{$df-select-clear-button-margin-left};
+  --#{$prefix}select-panel-border: #{$df-select-panel-border};
+  --#{$prefix}select-witharrow-clear-button-margin: #{$df-select-witharrow-clear-button-margin};
+  --#{$prefix}select-focus-zindex: #{$df-select-focus-zindex};
+  --#{$prefix}select-form-check-padding-start: #{$df-select-form-check-padding-start};
+  --#{$prefix}select-form-check-margin-start: #{$df-select-form-check-margin-start};
+  --#{$prefix}select-form-check-margin-bottom: #{$df-select-form-check-margin-bottom};
+  --#{$prefix}select-form-check-padding-bottom: #{$df-select-form-check-padding-bottom};
+  --#{$prefix}select-option-lg-height: #{$df-select-option-lg-height};
+  --#{$prefix}select-option-sm-height: #{$df-select-option-sm-height};
+  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    --#{$prefix}box-shadow-color: #{$input-focus-border-color};
+  } @else {
+    --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
+    --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity('primary', 'border-color')}
+  }
+  
   &.form-control {
     // add
     padding: 0;
@@ -91,14 +185,14 @@
     // add
     padding: 0;
     .ng-select-container {
-      border-radius: $df-select-border-radius-lg;
+      border-radius: var(--#{$prefix}select-border-radius-lg);
     }
   }
   &.form-control-sm {
     // add
     padding: 0;
     .ng-select-container {
-      border-radius: $df-select-border-radius-sm;
+      border-radius: var(--#{$prefix}select-border-radius-sm);
     }
   }
   &:not(.ng-select-multiple) {
@@ -108,12 +202,12 @@
       .ng-option {
         &.ng-option-marked {
           // ng-option-marked is equivalent to hover
-          background-color: $df-select-option-hover;
-          color: $df-select-option-color;
+          background-color: var(--#{$prefix}select-option-hover-bg-color);
+          color: var(--#{$prefix}select-option-hover-color);
         }
         &.ng-option-selected:not(.ng-option-marked) {
-          background-color: $df-select-single-optionselected-background-color;
-          color: $df-select-single-optionselected-color;
+          background-color: var(--#{$prefix}select-single-optionselected-background-color);
+          color: var(--#{$prefix}select-single-optionselected-color);
         }
       }
     }
@@ -146,53 +240,54 @@
       }
     }
   }
+  // TODO check the $input-focus-bg CSS variable
   &.ng-select-focused {
     > .ng-select-container {
       // override
       color: $input-focus-color;
       background-color: $input-focus-bg;
-      border-color: $form-select-focus-border-color;
+      border-color: var(--#{$prefix}form-select-focus-border-color);
       outline: 0;
       // Avoid using mixin so we can pass custom focus shadow properly
       @if $enable-shadows {
-        box-shadow: $input-box-shadow, $input-focus-box-shadow;
+        box-shadow: $input-box-shadow, $df-select-input-box-shadow;
       } @else {
-        box-shadow: $input-focus-box-shadow;
+        box-shadow: $df-select-input-box-shadow;
       }
     }
   }
   &.ng-select-disabled {
     > .ng-select-container {
-      background-color: $df-select-disabled-bg; // override
-      color: $df-select-disabled-color; // add
-      cursor: $df-select-disabled-cursor;
+      background-color: var(--#{$prefix}select-disabled-bg); // override
+      color: var(--#{$prefix}select-disabled-color); // add
+      cursor: var(--#{$prefix}select-disabled-cursor);
 
       .ng-arrow-wrapper {
         // override
-        cursor: $df-select-disabled-cursor;
+        cursor: var(--#{$prefix}select-disabled-cursor);
       }
 
       .ng-value {
-        background-color: $df-select-disabled-bg !important; // override
+        background-color: var(--#{$prefix}select-disabled-bg) !important; // override
         .badge {
           // add
-          cursor: $df-select-disabled-cursor;
-          background-color: $df-select-disabled-bg;
-          color: $df-select-disabled-color;
+          cursor: var(--#{$prefix}select-disabled-cursor);
+          background-color: var(--#{$prefix}select-disabled-bg);
+          color: var(--#{$prefix}select-disabled-color);
         }
       }
     }
   }
-  &.df-ng-select-readonly {
+   &.df-ng-select-readonly {
     // add
     > .ng-select-container {
-      background-color: $df-select-readonly-bg;
-      color: $df-select-readonly-color;
+      background-color: var(--#{$prefix}select-readonly-bg);
+      color: var(--#{$prefix}select-readonly-color);
 
       .badge {
         // add
-        background-color: $df-select-readonly-bg;
-        color: $df-select-readonly-color;
+        background-color: var(--#{$prefix}select-readonly-bg);
+        color: var(--#{$prefix}select-readonly-color);
       }
 
       .ng-arrow-wrapper {
@@ -201,38 +296,28 @@
       }
     }
   }
-  &.is-invalid {
-    > .ng-select-container {
-      border-color: $form-feedback-invalid-color;
-    }
-    &.ng-select-focused {
-      > .ng-select-container {
-        border-color: $form-feedback-invalid-color;
-        box-shadow: $df-select-input-invalid-feedback-focus-box-shadow;
+  @each $state, $data in $form-validation-states {
+    &.is-#{$state} {
+      $colorName: map.get($df-form-validation-states-names, $state);
+      @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'border-color')};
+      } @else {
+        --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
+        --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity($colorName, 'border-color')}
       }
-    }
-  }
-  &.is-valid {
-    // add
-    > .ng-select-container {
-      border-color: $form-feedback-valid-color;
-    }
-    &.ng-select-focused {
+      $color: map.get($data, color);
+      $box-shadow: $df-select-input-box-shadow;
+      --#{$prefix}select-#{$state}-border-color: #{$color};
+      --#{$prefix}select-#{$state}-focus-box-shadow: #{$box-shadow};
+      // add
       > .ng-select-container {
-        border-color: $form-feedback-valid-color;
-        box-shadow: $df-select-input-valid-feedback-focus-box-shadow;
+        border-color: var(--#{$prefix}select-#{$state}-border-color);
       }
-    }
-  }
-  &.is-warning {
-    // add
-    > .ng-select-container {
-      border-color: $df-form-feedback-warning-color;
-    }
-    &.ng-select-focused {
-      > .ng-select-container {
-        border-color: $df-form-feedback-warning-color;
-        box-shadow: $df-select-input-warning-feedback-focus-box-shadow;
+      &.ng-select-focused {
+        > .ng-select-container {
+          border-color: var(--#{$prefix}select-#{$state}-border-color);
+          box-shadow: var(--#{$prefix}select-#{$state}-focus-box-shadow);
+        }
       }
     }
   }
@@ -241,8 +326,8 @@
   }
   .ng-select-container {
     background-color: #fff;
-    border-radius: $df-select-border-radius; // override
-    border: $df-select-border; // override
+    border-radius: var(--#{$prefix}select-border-radius); // override
+    border: var(--#{$prefix}select-border); // override
     align-items: top;
     .ng-value-container {
       max-width: 100%; // add
@@ -256,6 +341,7 @@
       }
     }
   }
+  // TODO the $input-height-lg is a var CSS ?
   &.ng-select-single {
     &.form-control-lg {
       // add
@@ -283,23 +369,23 @@
             left: 0;
             padding-left: $input-padding-x;
             // TODO custom padding-right depending on .df-selectno-arrow and on sizes
-            padding-right: $df-select-single-input-padding;
+            padding-right: var(--#{$prefix}select-single-input-padding);
           }
           @include rtl {
             right: 0;
             padding-right: $input-padding-x;
             // TODO custom padding-right depending on .df-selectno-arrow and on sizes
-            padding-left: $df-select-single-input-padding;
+            padding-left: var(--#{$prefix}select-single-input-padding);
           }
           > input {
             font-weight: $df-select-input-font-weight;
           }
           @include ngs-root('.ng-select-clearable') {
             @include ltr {
-              padding-right: $df-select-single-clear-input-padding;
+              padding-right: var(--#{$prefix}select-single-clear-input-padding);
             }
             @include rtl {
-              padding-left: $df-select-single-clear-input-padding;
+              padding-left: var(--#{$prefix}select-single-clear-input-padding);
             }
           }
         }
@@ -326,8 +412,8 @@
     }
     &.ng-select-disabled {
       > .ng-select-container .ng-value-container .ng-value {
-        background-color: $df-select-disabled-bg; // override
-        color: $df-select-disabled-color; // add
+        background-color: var(--#{$prefix}select-disabled-bg); // override
+        color: var(--#{$prefix}select-disabled-color); // add
       }
     }
     &:not([disabled]):not(.df-ng-select-readonly) .ng-select-container {
@@ -345,8 +431,8 @@
         .ng-value {
           display: flex;
           align-items: center;
-          margin-top: $df-select-value-margin; // override todo depend on sizing
-          margin-bottom: $df-select-value-margin; // override
+          margin-top: var(--#{$prefix}select-value-margin); // override todo depend on sizing
+          margin-bottom: var(--#{$prefix}select-value-margin); // override
           @include ltr {
             padding-right: $input-padding-x;
           }
@@ -355,8 +441,8 @@
           }
           @include ngs-root('.form-control-lg') {
             // add
-            margin-top: $df-select-value-margin-lg; // override todo depend on sizing
-            margin-bottom: $df-select-value-margin-lg; // override
+            margin-top: var(--#{$prefix}select-value-margin-lg); // override todo depend on sizing
+            margin-bottom: var(--#{$prefix}select-value-margin-lg); // override
             @include ltr {
               padding-right: $input-padding-x-lg;
             }
@@ -366,8 +452,8 @@
           }
           @include ngs-root('.form-control-sm') {
             // add
-            margin-top: $df-select-value-margin-sm; // override todo depend on sizing
-            margin-bottom: $df-select-value-margin-sm; // override
+            margin-top: var(--#{$prefix}select-value-margin-sm); // override todo depend on sizing
+            margin-bottom: var(--#{$prefix}select-value-margin-sm); // override
             @include ltr {
               padding-right: $input-padding-x-sm;
             }
@@ -375,55 +461,32 @@
               padding-left: $input-padding-x-sm;
             }
           }
-          color: $df-select-value-color; // add
+          color: var(--#{$prefix}select-value-color); // add
           &.ng-value-disabled {
-            background-color: $df-select-value-disabled-bg-color; // override
-            border: $df-select-value-disabled-border; // override
-            cursor: $df-select-disabled-cursor;
+            background-color: var(--#{$prefix}select-value-disabled-bg-color); // override
+            border: var(--#{$prefix}select-value-disabled-border); // override
+            cursor: var(--#{$prefix}select-disabled-cursor);
           }
           .ng-value-label {
             display: inline-block;
           }
-          .ng-value-icon:not(.df-ym):not(.icon-times) {
-            display: inline-block;
-            padding: 0 0.3125rem; // TODO work on this?
-            &:hover {
-              background-color: $df-select-option-hover;
-            }
-            &.left {
-              @include ltr {
-                border-right: $df-select-value-lefticon-border-right;
-              }
-              @include rtl {
-                border-left: $df-select-value-lefticon-border-right;
-              }
-            }
-            &.right {
-              @include ltr {
-                border-left: $df-select-value-righticon-border-left;
-              }
-              @include rtl {
-                border-right: $df-select-value-righticon-border-left;
-              }
-            }
-          }
         }
         .ng-input {
           > input {
-            font-weight: $df-select-input-font-weight;
+            font-weight: var(--#{$prefix}select-input-font-weight);
             padding: 0; // add
           }
-          margin-top: $df-select-value-margin; // override depend on sizing
-          margin-bottom: $df-select-value-margin; // override
+          margin-top: var(--#{$prefix}select-value-margin); // override depend on sizing
+          margin-bottom: var(--#{$prefix}select-value-margin); // override
           @include ngs-root('.form-control-lg') {
             // add
-            margin-top: $df-select-value-margin-lg; // override
-            margin-bottom: $df-select-value-margin-lg; // override
+            margin-top: var(--#{$prefix}select-value-margin-lg); // override
+            margin-bottom: var(--#{$prefix}select-value-margin-lg); // override
           }
           @include ngs-root('.form-control-sm') {
             // add
-            margin-top: $df-select-value-margin-sm; // add
-            margin-bottom: $df-select-value-margin-sm; // add
+            margin-top: var(--#{$prefix}select-value-margin-sm); // add
+            margin-bottom: var(--#{$prefix}select-value-margin-sm); // add
           }
         }
       }
@@ -433,67 +496,66 @@
       .ng-optgroup,
       .ng-option {
         &.ng-option-selected {
-          background-color: $df-select-optionselected-background-color;
+          background-color: var(--#{$prefix}select-optionselected-background-color);
           &.ng-option-marked {
             // ng-option-marked is equivalent to hover
             // add
-            background-color: $df-select-option-hover;
+            background-color: var(--#{$prefix}select-option-hover-bg-color);
           }
         }
       }
     }
   }
-  // .ng-clear is added here compared to original css
   .ng-clear-wrapper {
-    width: $df-select-clear-button-width; // override
-    height: $df-select-clear-button-height; // add
-    display: $df-select-clear-button-display; // add
-    margin-top: $df-select-value-margin; // add
-    margin-bottom: $df-select-value-margin; // override
+    width: var(--#{$prefix}select-clear-button-width) !important; // override
+    height: var(--#{$prefix}select-clear-button-height); // add
+    display: var(--#{$prefix}select-clear-button-display); // add
+    margin-top: var(--#{$prefix}select-value-margin); // add
+    margin-bottom: var(--#{$prefix}select-value-margin); // override
     @include ngs-root('.form-control-lg') {
       // add
-      margin-top: $df-select-value-margin-lg; // override
+      margin-top: var(--#{$prefix}select-value-margin-lg); // override
     }
     @include ngs-root('.form-control-sm') {
       // add
-      margin-top: $df-select-value-margin-sm; // add
+      margin-top: var(--#{$prefix}select-value-margin-sm); // add
     }
     @include ltr {
-      margin-left: $df-select-clear-button-margin-left; // add
+      margin-left: var(--#{$prefix}select-clear-button-margin-left); // add
       @include ngs-root('.df-selectno-arrow') {
         // add
-        margin-right: $df-select-witharrow-clear-button-margin; // add
+        margin-right: var(--#{$prefix}select-witharrow-clear-button-margin); // add
       }
     }
     @include rtl {
-      margin-right: $df-select-clear-button-margin-left;
+      margin-right: var(--#{$prefix}select-clear-button-margin-left);
       @include ngs-root('.df-selectno-arrow') {
         // add
-        margin-left: $df-select-witharrow-clear-button-margin;
+        margin-left: var(--#{$prefix}select-witharrow-clear-button-margin);
       }
     }
     &:after {
       //add
       content: $df-focused-cross-icon;
-      font-family: $df-font-family;
-      font-size: $df-focused-cross-font-size; // TODO does it need to be changed for sm and lg?
-      border-radius: $df-focused-cross-border-radius;
-      display: $df-select-clear-button-display;
-      width: $df-iwi-icon-width;
-      height: $df-iwi-icon-height;
-      line-height: $df-select-clear-button-line-height;
-      justify-content: $df-select-clear-button-justify-content;
+      font-family: var(--#{$prefix}font-family);
+      font-size: var(--#{$prefix}focused-cross-font-size); // TODO does it need to be changed for sm and lg?
+      border-radius: var(--#{$prefix}focused-cross-border-radius);
+      display: var(--#{$prefix}select-clear-button-display);
+      width: var(--#{$prefix}iwi-icon-width);
+      height: var(--#{$prefix}iwi-icon-height);
+      line-height: var(--#{$prefix}select-clear-button-line-height);
+      justify-content: var(--#{$prefix}select-clear-button-justify-content);
     }
     &:hover {
       &:after {
-        background-color: $df-focused-cross-hover-background-color;
+        background-color: var(--#{$prefix}focused-cross-hover-background-color);
         cursor: $df-cursor-type;
       }
     }
     &:focus {
       outline: none; // override mandatory
       &:after {
-        box-shadow: $df-focused-box-shadow;
+        box-shadow: $df-select-clear-focus-box-shadow;
       }
     }
     > .ng-clear {
@@ -501,44 +563,46 @@
       display: none !important;
     }
   }
+
+
   .ng-spinner-zone {
     padding-right: 0.3125rem; // todo check when feature is needed
     padding-top: 0.3125rem; // todo check when feature is needed
   }
   .ng-spinner-loader {
-    border-left: $df-select-spinner-loader-border-left;
+    border-left: var(--#{$prefix}select-spinner-loader-border-left);
   }
   .ng-arrow-wrapper {
-    width: $df-select-arrow-wrapper-width; // override
-    height: $df-select-arrow-wrapper-height; // add
-    border-radius: $df-select-arrow-wrapper-border-radius; // add
-    margin-top: $df-select-value-margin; // add
+    width: var(--#{$prefix}select-arrow-wrapper-width); // override
+    height: var(--#{$prefix}select-arrow-wrapper-height); // add
+    border-radius: var(--#{$prefix}select-arrow-wrapper-border-radius); // add
+    margin-top: var(--#{$prefix}select-value-margin); // add
     @include ngs-root('.form-control-lg') {
       // add
-      margin-top: $df-select-value-margin-lg; // override
+      margin-top: var(--#{$prefix}select-value-margin-lg); // override
     }
     @include ngs-root('.form-control-sm') {
       // add
-      margin-top: $df-select-value-margin-sm; // add
+      margin-top: var(--#{$prefix}select-value-margin-sm); // add
     }
     @include ltr {
       // add
-      margin-left: $df-select-arrow-wrapper-margin-left;
-      margin-right: $df-select-arrow-wrapper-margin-right;
+      margin-left: var(--#{$prefix}select-arrow-wrapper-margin-left);
+      margin-right: var(--#{$prefix}select-arrow-wrapper-margin-right);
     }
     @include rtl {
       // add
-      margin-right: $df-select-arrow-wrapper-margin-left;
-      margin-left: $df-select-arrow-wrapper-margin-right;
+      margin-right: var(--#{$prefix}select-arrow-wrapper-margin-left);
+      margin-left: var(--#{$prefix}select-arrow-wrapper-margin-right);
     }
     display: flex;
     &:hover {
-      background-color: $df-select-arrow-wrapper-hover-background-color;
+      background-color: var(--#{$prefix}select-arrow-wrapper-hover-background-color);
     }
-    text-align: $df-select-arrow-text-align;
+    text-align: var(--#{$prefix}select-arrow-text-align);
     .ng-arrow {
-      width: $df-select-arrow-width !important;
-      height: $df-select-arrow-height !important;
+      width: var(--#{$prefix}select-arrow-width) !important;
+      height: var(--#{$prefix}select-arrow-height) !important;
       &:before {
         // add
         @extend %df-select-caret-down;
@@ -548,14 +612,14 @@
 
   .ng-dropdown-panel {
     background-color: #fff;
-    border: $df-select-panel-border; // override
-    border-radius: $df-select-panel-border-radius; // add
-    box-shadow: $df-select-panel-box-shadow; // override
+    border: var(--#{$prefix}select-panel-border); // override
+    border-radius: var(--#{$prefix}select-panel-border-radius); // add
+    box-shadow: var(--#{$prefix}select-panel-box-shadow); // override
     width: initial; // override
-    min-width: $df-select-panel-min-width; // add
+    min-width: var(--#{$prefix}select-panel-min-width); // add
     .ng-option + .ng-optgroup {
       // add
-      border-top: $df-select-optgroup-border;
+      border-top: var(--#{$prefix}select-optgroup-border);
     }
     &.ng-select-bottom {
       top: calc(100% + #{$input-btn-focus-width} + 1px); // override
@@ -603,15 +667,15 @@
         overflow: hidden;
         text-overflow: ellipsis;
         .form-check {
-          margin-bottom: $df-select-form-check-margin-bottom;
-          padding-bottom: $df-select-form-check-padding-bottom;
+          margin-bottom: var(--#{$prefix}select-form-check-margin-bottom);
+          padding-bottom: var(--#{$prefix}select-form-check-padding-bottom);
           @include rtl {
-            padding-right: $df-select-form-check-padding-start;
-            margin-right: $df-select-form-check-margin-start;
+            padding-right: var(--#{$prefix}select-form-check-padding-start);
+            margin-right: var(--#{$prefix}select-form-check-margin-start);
           }
           @include ltr {
-            padding-left: $df-select-form-check-padding-start;
-            margin-left: $df-select-form-check-margin-start;
+            padding-left: var(--#{$prefix}select-form-check-padding-start);
+            margin-left: var(--#{$prefix}select-form-check-margin-start);
           }
           overflow: hidden;
           text-overflow: ellipsis;
@@ -637,7 +701,7 @@
         }
         &.ng-option-marked {
           // ng-option-marked is equivalent to hover
-          background-color: $df-select-option-hover; // override
+          background-color: var(--#{$prefix}select-option-hover-bg-color); // override
         }
         &.ng-option-selected {
           font-weight: 400; // override
@@ -658,10 +722,12 @@
           // add
           display: block;
           @include ngs-root('.form-control-lg') {
-            height: 1.95rem;
+            height: var(--#{$prefix}select-option-lg-height);
+            line-height: var(--#{$prefix}select-option-lg-height);
           }
           @include ngs-root('.form-control-sm') {
-            height: 1.6rem;
+            height: var(--#{$prefix}select-option-sm-height);
+            line-height: var(--#{$prefix}select-option-sm-height);
           }
         }
         &.ng-option-selected {
@@ -671,15 +737,15 @@
         }
         &.ng-option-marked {
           // ng-option-marked is equivalent to hover
-          background-color: $df-select-option-hover;
+          background-color: var(--#{$prefix}select-option-hover-bg-color);
         }
         &.ng-option-disabled {
-          color: $df-select-not-found-disabled; // add for the not found text
+          color: var(--#{$prefix}select-not-found-disabled); // add for the not found text
           .ng-option-label {
             // add
-            color: $df-select-option-disabled-color;
+            color: var(--#{$prefix}select-option-disabled-color);
           }
-          cursor: $df-select-disabled-cursor; // add
+          cursor: var(--#{$prefix}select-disabled-cursor); // add
         }
         .ng-tag-label {
           // todo check when feature is needed
@@ -700,7 +766,7 @@
 .input-group {
   .ng-select {
     &.ng-select-focused {
-      z-index: $df-select-focus-zindex; // this is the actual value of ng-select.component.scss
+      z-index: var(--#{$prefix}select-focus-zindex); // this is the actual value of ng-select.component.scss
     }
     @include ltr {
       &:not(:first-child) {