@design-factory/design-factory 20.0.2 → 21.0.0-next.0

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

@@ -1,804 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:selector';
-@import 'select.mixin';
-
-.form-select,
-.ng-select {
-  --#{$prefix}form-select-focus-border-color: #{$form-select-focus-border-color};
-}
-
-/* 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 meta.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: var(--#{$prefix}form-select-focus-border-color);
-  }
-
-  &:not([disabled]) {
-    // add
-    cursor: pointer;
-
-    > option:checked {
-      background-color: $form-select-disabled-bg;
-    }
-  }
-
-  &:disabled {
-    // override
-    cursor: var(--#{$prefix}select-disabled-cursor);
-  }
-
-  &:not([multiple]):disabled {
-    // override
-    @include ltr {
-      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 var(--#{$prefix}select-indicator-disabled) no-repeat left
-        $form-select-padding-x center;
-      background-size: $form-select-bg-size;
-    }
-  }
-}
-
-.form-select[multiple],
-.form-select[size]:not([size='1']) {
-  @include rtl {
-    background-image: none;
-    padding-left: $input-padding-x;
-  }
-}
-
-// TODO rtl feature see ng-select new theme
-@mixin ngs-root($child) {
-  @at-root #{selector.replace(&, '.ng-select', '.ng-select' + $child)} {
-    @content;
-  }
-}
-
-/* Ng-select select */
-// Use this to remove the arrow from the ng-select widget.
-.df-selectno-arrow {
-  > .ng-select-container {
-    > .ng-arrow-wrapper {
-      display: none;
-    }
-  }
-}
-
-.highlighted {
-  color: $df-select-highlight-color;
-  text-decoration: inherit !important;
-}
-
-%df-select-caret-down {
-  color: var(--#{$prefix}select-icon-color);
-  speak: none;
-  font-family: $df-select-icon-font-family;
-  content: $df-select-icon-caret-down;
-  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
-// style taken directly from the scss file of the library
-// Override is elements that was changed from the default look
-// 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-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 meta.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;
-    border: none;
-    height: initial;
-  }
-  &.form-control-lg {
-    // add
-    padding: 0;
-    .ng-select-container {
-      border-radius: var(--#{$prefix}select-border-radius-lg);
-    }
-    @include df-select-border-radius-panel($df-select-panel-border-radius-lg);
-  }
-  &.form-control-sm {
-    // add
-    padding: 0;
-    .ng-select-container {
-      border-radius: var(--#{$prefix}select-border-radius-sm);
-    }
-    @include df-select-border-radius-panel($df-select-panel-border-radius-sm);
-  }
-  &:not(.ng-select-multiple) {
-    // override
-    .ng-dropdown-panel .ng-dropdown-panel-items {
-      .ng-optgroup,
-      .ng-option {
-        &.ng-option-marked {
-          // ng-option-marked is equivalent to hover
-          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: var(--#{$prefix}select-single-optionselected-background-color);
-          color: var(--#{$prefix}select-single-optionselected-color);
-        }
-      }
-    }
-  }
-
-  &:hover:not([disabled]):not(.df-ng-select-readonly) {
-    // override
-    .ng-input {
-      cursor: pointer;
-      & > input {
-        cursor: pointer !important;
-      }
-    }
-  }
-  .ng-value {
-    // override
-    .badge {
-      cursor: inherit;
-    }
-  }
-  &.ng-select-opened {
-    > .ng-select-container {
-      background: #fff;
-      border-color: #b3b3b3 #ccc #d9d9d9;
-      .ng-arrow {
-        &:before {
-          // add
-          @extend %df-select-caret-down;
-        }
-      }
-    }
-  }
-  // 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: 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, $df-select-input-box-shadow;
-      } @else {
-        box-shadow: $df-select-input-box-shadow;
-      }
-    }
-  }
-  &.ng-select-disabled {
-    > .ng-select-container {
-      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: var(--#{$prefix}select-disabled-cursor);
-
-        .ng-arrow {
-          &:before {
-            color: var(--#{$prefix}button-text-basic-color-disabled-foreground);
-          }
-        }
-      }
-
-      .ng-value {
-        background-color: var(--#{$prefix}select-disabled-bg) !important; // override
-        .badge {
-          @extend [disabled];
-        }
-      }
-    }
-  }
-  &.df-ng-select-readonly {
-    // add
-    > .ng-select-container {
-      background-color: var(--#{$prefix}select-readonly-bg);
-      color: var(--#{$prefix}select-readonly-color);
-    }
-  }
-  @each $state, $data in $form-validation-states {
-    &.is-#{$state} {
-      $colorName: map.get($df-form-validation-states-names, $state);
-      @if meta.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')};
-      }
-      $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: var(--#{$prefix}select-#{$state}-border-color);
-      }
-      &.ng-select-focused {
-        > .ng-select-container {
-          border-color: var(--#{$prefix}select-#{$state}-border-color);
-          box-shadow: var(--#{$prefix}select-#{$state}-focus-box-shadow);
-        }
-      }
-    }
-  }
-  .ng-has-value .ng-placeholder {
-    display: none;
-  }
-  .ng-select-container {
-    background-color: #fff;
-    border-radius: var(--#{$prefix}select-border-radius); // override
-    border: var(--#{$prefix}select-border); // override
-    align-items: top;
-    .ng-value-container {
-      max-width: 100%; // add
-      overflow: hidden; // add
-      align-items: center;
-      .ng-placeholder {
-        font-style: $df-form-placeholder-font-style;
-        color: $input-placeholder-color;
-        // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
-        opacity: 1;
-      }
-    }
-  }
-  // TODO the $input-height-lg is a var CSS ?
-  &.ng-select-single {
-    &.form-control-lg {
-      // add
-      .ng-select-container {
-        height: $input-height-lg; // in single case we will only have one line
-      }
-    }
-    &.form-control-sm {
-      // add
-      .ng-select-container {
-        height: $input-height-sm; // in single case we will only have one line
-      }
-    }
-    .ng-select-container {
-      height: $input-height;
-      .ng-value-container {
-        @include ltr {
-          padding-left: $input-padding-x; // override
-        }
-        @include rtl {
-          padding-right: $input-padding-x; // override
-        }
-        .ng-input {
-          @include ltr {
-            left: 0;
-            padding-left: $input-padding-x;
-            // TODO custom padding-right depending on .df-selectno-arrow and on sizes
-            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: var(--#{$prefix}select-single-input-padding);
-          }
-          > input {
-            font-weight: $df-select-input-font-weight;
-          }
-          @include ngs-root('.ng-select-clearable') {
-            @include ltr {
-              padding-right: var(--#{$prefix}select-single-clear-input-padding);
-            }
-            @include rtl {
-              padding-left: var(--#{$prefix}select-single-clear-input-padding);
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.ng-select-multiple {
-    &.form-control-lg {
-      // add
-      height: initial; // in single case we will only have one line
-
-      > .ng-select-container .ng-value-container {
-        min-height: calc($input-height-lg - 2 * $input-border-width);
-        .ng-value {
-          font-size: inherit;
-        }
-      }
-    }
-    &.form-control-sm {
-      // add
-      height: initial; // in single case we will only have one line
-
-      > .ng-select-container {
-        height: inherit;
-        .ng-value-container {
-          min-height: calc($input-height-sm - 2 * $input-border-width);
-        }
-      }
-    }
-    &.ng-select-disabled {
-      > .ng-select-container .ng-value-container .ng-value {
-        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 {
-      cursor: $df-cursor-type;
-    }
-    .ng-select-container {
-      .ng-value-container {
-        @include ltr {
-          padding-left: $input-padding-x; // override  check if we should use input padding left here todo change it with sizing
-        }
-        @include rtl {
-          padding-right: $input-padding-x; // override  check if we should use input padding left here todo change it with sizing
-        }
-        height: fit-content;
-        .ng-value {
-          display: flex;
-          align-items: center;
-          margin-top: var(--#{$prefix}select-value-margin); // override todo depend on sizing
-          margin-bottom: var(--#{$prefix}select-value-margin); // override
-          max-width: 100%; // add
-          @include ltr {
-            padding-right: $input-padding-x;
-          }
-          @include rtl {
-            padding-left: $input-padding-x;
-          }
-          @include ngs-root('.form-control-lg') {
-            // add
-            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;
-            }
-            @include rtl {
-              padding-left: $input-padding-x-lg;
-            }
-          }
-          @include ngs-root('.form-control-sm') {
-            // add
-            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;
-            }
-            @include rtl {
-              padding-left: $input-padding-x-sm;
-            }
-          }
-          color: var(--#{$prefix}select-value-color); // add
-          &.ng-value-disabled {
-            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-input {
-          > input {
-            font-weight: var(--#{$prefix}select-input-font-weight);
-            padding: 0; // add
-          }
-          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: 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: var(--#{$prefix}select-value-margin-sm); // add
-            margin-bottom: var(--#{$prefix}select-value-margin-sm); // add
-          }
-        }
-      }
-    }
-
-    .ng-dropdown-panel .ng-dropdown-panel-items {
-      .ng-optgroup,
-      .ng-option {
-        white-space: normal;
-        word-break: normal;
-        overflow-wrap: anywhere;
-        &.ng-option-selected {
-          background-color: var(--#{$prefix}select-optionselected-background-color);
-          &.ng-option-marked {
-            // ng-option-marked is equivalent to hover
-            // add
-            background-color: var(--#{$prefix}select-option-hover-bg-color);
-          }
-        }
-      }
-    }
-  }
-  .ng-clear-wrapper {
-    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: calc(
-        ($input-height-lg - 2 * $input-border-width - var(--#{$prefix}select-clear-button-height)) / 2
-      ); //override
-    }
-    @include ngs-root('.form-control-sm') {
-      // add
-      margin-top: var(--#{$prefix}select-value-margin-sm); // add
-      margin-bottom: var(--#{$prefix}select-value-margin-sm); // add
-    }
-    @include ltr {
-      margin-left: var(--#{$prefix}select-clear-button-margin-left); // add
-      @include ngs-root('.df-selectno-arrow') {
-        // add
-        margin-right: var(--#{$prefix}select-witharrow-clear-button-margin); // add
-      }
-    }
-    @include rtl {
-      margin-right: var(--#{$prefix}select-clear-button-margin-left);
-      @include ngs-root('.df-selectno-arrow') {
-        // add
-        margin-left: var(--#{$prefix}select-witharrow-clear-button-margin);
-      }
-    }
-    &:after {
-      //add
-      content: $df-focused-cross-icon;
-      font-family: $df-font-awesome-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: var(--#{$prefix}focused-cross-hover-background-color);
-        cursor: $df-cursor-type;
-      }
-    }
-    &:focus {
-      outline: none; // override mandatory
-      &:after {
-        box-shadow: $df-select-clear-focus-box-shadow;
-      }
-    }
-    > .ng-clear {
-      // add
-      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: var(--#{$prefix}select-spinner-loader-border-left);
-  }
-  .ng-arrow-wrapper {
-    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: calc(
-        ($input-height-lg - 2 * $input-border-width - var(--#{$prefix}select-arrow-wrapper-height)) / 2
-      ); // add
-      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-        font-size: var(--#{$prefix}typo-sizing-default); // in order to have the arrow verticaly aligned in large
-      }
-    }
-    @include ngs-root('.form-control-sm') {
-      // add
-      margin-top: var(--#{$prefix}select-value-margin-sm); // add
-    }
-    @include ltr {
-      // add
-      margin-left: var(--#{$prefix}select-arrow-wrapper-margin-left);
-      margin-right: var(--#{$prefix}select-arrow-wrapper-margin-right);
-    }
-    @include rtl {
-      // add
-      margin-right: var(--#{$prefix}select-arrow-wrapper-margin-left);
-      margin-left: var(--#{$prefix}select-arrow-wrapper-margin-right);
-    }
-    display: flex;
-    text-align: var(--#{$prefix}select-arrow-text-align);
-    .ng-arrow {
-      width: var(--#{$prefix}select-arrow-width) !important;
-      height: var(--#{$prefix}select-arrow-height) !important;
-      &:before {
-        // add
-        @extend %df-select-caret-down;
-      }
-    }
-  }
-  &:not(.ng-select-disabled):not(.df-ng-select-readonly) {
-    .ng-arrow-wrapper:hover {
-      background-color: var(--#{$prefix}select-arrow-wrapper-hover-background-color);
-    }
-  }
-  @include df-select-border-radius-panel($df-select-panel-border-radius);
-  .ng-dropdown-panel {
-    background-color: #fff;
-    border: var(--#{$prefix}select-panel-border); // override
-    box-shadow: var(--#{$prefix}select-panel-box-shadow); // override
-    overflow: auto;
-    width: initial; // override
-    min-width: var(--#{$prefix}select-panel-min-width); // add
-    .ng-option + .ng-optgroup {
-      // add
-      border-top: var(--#{$prefix}select-optgroup-border);
-    }
-    &.ng-select-bottom {
-      top: calc(100% + #{$input-btn-focus-width} + 1px); // override
-      .ng-dropdown-panel-items {
-        .ng-option {
-          white-space: initial; // override
-        }
-      }
-    }
-    &.ng-select-top {
-      bottom: calc(100% + #{$input-btn-focus-width} + 1px);
-      margin-bottom: -1px;
-    }
-    .ng-dropdown-header {
-      // todo check when needed
-      border-bottom: 1px solid #ccc;
-      padding: 0.3125rem 0.4375rem;
-    }
-    .ng-dropdown-footer {
-      // todo check when needed
-      border-top: 1px solid #ccc;
-      padding: 0.3125rem 0.4375rem;
-    }
-    .ng-dropdown-panel-items {
-      margin-bottom: 0px; // override
-      .ng-optgroup,
-      .ng-option {
-        // add
-        overflow: hidden;
-        text-overflow: ellipsis;
-        .form-check {
-          margin-bottom: var(--#{$prefix}select-form-check-margin-bottom);
-          padding-bottom: var(--#{$prefix}select-form-check-padding-bottom);
-          @include rtl {
-            padding-right: var(--#{$prefix}select-form-check-padding-start);
-            margin-right: var(--#{$prefix}select-form-check-margin-start);
-          }
-          @include ltr {
-            padding-left: var(--#{$prefix}select-form-check-padding-start);
-            margin-left: var(--#{$prefix}select-form-check-margin-start);
-          }
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-      .ng-optgroup {
-        user-select: none;
-        padding: 0.325rem 1rem;
-        @include ngs-root('.form-control-lg') {
-          // add
-          padding: 0.525rem 1rem;
-        }
-        @include ngs-root('.form-control-sm') {
-          // add
-          padding: 0.138rem 1rem;
-        }
-        font-weight: 500;
-        font-family: $font-family-sans-serif; // add
-        cursor: pointer;
-        &.ng-option-disabled {
-          font-family: $font-family-sans-serif; // add
-          cursor: default; // override
-        }
-        &.ng-option-marked {
-          // ng-option-marked is equivalent to hover
-          background-color: var(--#{$prefix}select-option-hover-bg-color); // override
-        }
-        &.ng-option-selected {
-          font-weight: 400; // override
-        }
-      }
-      .ng-option {
-        background-color: #fff;
-        padding: 0.325rem 1rem;
-        @include ngs-root('.form-control-lg') {
-          // add
-          padding: 0.525rem 1rem;
-        }
-        @include ngs-root('.form-control-sm') {
-          // add
-          padding: 0.138rem 1rem;
-        }
-        .ng-option-label {
-          // add
-          display: block;
-          @include ngs-root('.form-control-lg') {
-            height: var(--#{$prefix}select-option-lg-height);
-            line-height: var(--#{$prefix}select-option-lg-height);
-          }
-          @include ngs-root('.form-control-sm') {
-            height: var(--#{$prefix}select-option-sm-height);
-            line-height: var(--#{$prefix}select-option-sm-height);
-          }
-        }
-        &.ng-option-selected {
-          .ng-option-label {
-            font-weight: 400; // override
-          }
-        }
-        &.ng-option-marked {
-          // ng-option-marked is equivalent to hover
-          background-color: var(--#{$prefix}select-option-hover-bg-color);
-        }
-        &.ng-option-disabled {
-          color: var(--#{$prefix}select-not-found-disabled); // add for the not found text
-          .ng-option-label {
-            // add
-            color: var(--#{$prefix}select-option-disabled-color);
-          }
-          cursor: var(--#{$prefix}select-disabled-cursor); // add
-        }
-        .ng-tag-label {
-          // todo check when feature is needed
-          @include ltr {
-            padding-right: 0.3125rem;
-          }
-          @include rtl {
-            padding-left: 0.3125rem;
-          }
-          font-size: 80%;
-          font-weight: 400;
-        }
-      }
-    }
-  }
-}
-
-.input-group {
-  .ng-select {
-    &.ng-select-focused {
-      z-index: var(--#{$prefix}select-focus-zindex); // this is the actual value of ng-select.component.scss
-    }
-    @include ltr {
-      &:not(:first-child) {
-        .ng-select-container {
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-        }
-      }
-      &:not(:last-child) {
-        .ng-select-container {
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-        }
-      }
-    }
-    @include rtl {
-      &:not(:first-child) {
-        .ng-select-container {
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-        }
-      }
-      &:not(:last-child) {
-        .ng-select-container {
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-        }
-      }
-    }
-  }
-}