@use 'sass:color';

//default
$ddl-header-font-weight: 600 !default;
$ddl-last-child-bottom-border: 0 !default;
$ddl-default-font-family: inherit !default;
$ddl-line-height: 48px !default;
$ddl-list-border-size: 1px !default;
$ddl-default-header-font-color: $default-font-color !default;
$ddl-list-bottom-border: $ddl-list-border-size !default;
$ddl-list-padding-right: 16px !default;
$ddl-list-rtl-padding-left: 16px !default;
$ddl-list-border-color: $neutral-light !default;
$ddl-list-font-family: inherit !default;
$ddl-list-gradient-color: transparent !default;
$mention-gradient-color: $theme-primary-font !default;
$mention-list-box-shadow-color: 0 0 5px 0 rgba($shadow, .26) !default;
$mention-chip-bg-color: $neutral-lighter-alt !default;
$mention-chip-border-radius: 0 !default;
$mention-chip-border: none !default;
$ddl-list-bg-color: $neutral-lighter-alt !default;
$ddl-list-header-bg-color: $neutral-lighter-alt !default;
$ddl-list-tap-color: transparent !default;
$ddl-list-header-border-color: 1px $neutral-light !default;
$ddl-list-default-font-color: $neutral-light-font !default;
$ddl-list-active-border-color: $neutral-quintenary !default;
$mention-popup-bg-color: $neutral-quintenary !default;
$ddl-list-active-font-color: $neutral-light-font !default;
$mention-active-font-color: $theme-primary !default;
$ddl-list-active-bg-color: $neutral-quintenary !default;
$ddl-list-hover-bg-color: $neutral-light !default;
$ddl-list-hover-border-color: $neutral-light !default;
$ddl-list-hover-font-color: $neutral-light-font !default;
$ddl-nodata-font-color: $neutral-light-font !default;
$ddl-group-list-padding-left: 20px !default;
$ddl-group-list-small-padding-left: $ddl-group-list-padding-left !default;
$ddl-group-list-bigger-padding-left: $ddl-group-list-padding-left !default;
$ddl-group-list-bigger-small-padding-left: $ddl-group-list-padding-left !default;
$ddl-list-header-padding-left: 10px !default;
$ddl-list-header-small-padding-left: $ddl-list-header-padding-left !default;
$ddl-list-header-bigger-small-padding-left: $ddl-list-header-padding-left !default;
$ddl-list-header-bigger-padding-left: $ddl-list-header-padding-left !default;
$ddl-list-font-size: 14px !default;
$ddl-group-list-font-size: 14px !default;
$ddl-list-header-font-color: $theme-tertiary !default;
$ddl-list-text-indent: 10px !default;
$ddl-bigger-text-indent: $ddl-list-text-indent !default;
$ddl-list-rtl-padding-right: 0 !default;
$ddl-list-line-height: 36px !default;
$ddl-bigger-list-header-font-size: $ddl-list-font-size !default;
$ddl-multi-column-border-width: 0 0 1px 0 !default;
$ddl-multi-column-border-color: $neutral-light !default;
$ddl-list-header-font-size: $ddl-group-list-font-size !default;
$ddl-small-list-header-font-size: $ddl-group-list-font-size !default;
$ddl-group-list-item-text-intent: 0 !default;
$ddl-list-zero-padding: 0 !default;
$ddl-list-nodata-padding: 14px 16px !default;
$ddl-list-nodata-font-size: 14px !default;

// Small Size

$ddl-small-icon-font-size: 14px !default;
$ddl-small-line-height: 26px !default;
$ddl-small-list-font-color: $neutral-light-font !default;
$ddl-small-list-text-indent: 10px !default;

// Touch Small

$ddl-bigger-small-icon-font-size: 18px !default;
$ddl-bigger-small-line-height: 40px !default;
$ddl-bigger-small-list-font-color: $neutral-light-font !default;
$ddl-bigger-small-list-text-indent: 16px !default;
$ddl-bigger-small-list-header-font-size: 14px !default;
$ddl-bgr-list-item-icon-font-size: 20px !default;
$ddl-nrml-list-item-icon-font-size: 16px !default;
$bgr-drop-base-height: 45px !default;
$ddl-base-min-height: 36px !default;
$mention-popup-margin-top: 2px !default;
$ddl-two-width: 2px !default;
$ddl-mention-editable-min-height: 120px !default;
$ddl-multi-column-popup-padding-right: 16px !default;
$ddl-multi-column-popup-line-height: 36px !default;
$ddl-multi-popup-scroll-head-pad-right: 16px !default;
$ddl-zero-spacing: 0 !default;
$ddl-auto-height: auto !default;
$ddl-full-height: 100% !default;
$ddl-full-width: 100% !default;
$ddl-bgr-dropbase-list-icon-item-padding: 12px !default;

//enddefault

//dimensions
@include export-module('dropdownbase-fabric-dark') {
  .e-dropdownbase .e-list-item .e-list-icon {
    padding-inline-end: 10px;
  }

  .e-small .e-dropdownbase .e-list-item .e-list-icon {
    padding-inline-end: 8px;
  }
}

@include export-module('dropdownbase-layout') {
  .e-dropdownbase {
    display: block;
    height: $ddl-full-height;
    min-height: $ddl-base-min-height;
    position: relative;
    width: $ddl-full-width;
    @at-root {
      #{if(&, '&', '*')} .e-list-parent {
        margin: $ddl-list-zero-padding;
        padding: $ddl-list-zero-padding;
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        cursor: default;
      }

      #{if(&, '&', '*')} .e-list-item {
        cursor: pointer;
        overflow: hidden;
        position: relative;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
        width: $ddl-full-width;
      }

      #{if(&, '&', '*')} .e-list-item .e-list-icon {
        font-size: $ddl-nrml-list-item-icon-font-size;
        vertical-align: middle;
      }

      #{if(&, '&', '*')} .e-fixed-head {
        position: absolute;
        top: $ddl-zero-spacing;
      }
    }
  }

  .e-dropdownbase.e-content {
    overflow: auto;
    position: relative;
    @if $skin-name == 'tailwind3' {
      border-radius: $dropdownbase-content-border-radius;
    }
  }

  #{&}.e-popup.e-ddl .e-dropdownbase.e-nodata,
  #{&}.e-popup.e-mention .e-dropdownbase.e-nodata {
    color: $ddl-nodata-font-color;
    cursor: default;
    font-family: $ddl-list-font-family;
    font-size: $ddl-list-nodata-font-size;
    padding: $ddl-list-nodata-padding;
    text-align: center;
  }

  .e-mention.e-popup {
    background: $mention-popup-bg-color;
    box-shadow: 0 2px 3px 1px $mention-list-box-shadow-color;
    margin-top: $mention-popup-margin-top;
    position: absolute;
    @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' or $skin-name == 'bootstrap5.3' {
      border: $mention-popup-border;
      border-radius: $mention-popup-border-radius;
      padding: $mention-popup-padding;
    }
    @else {
      border: 0;
    }
    @if $skin-name == 'Material3' {
      border-radius: $mention-popup-border-radius;
      padding: $mention-popup-padding;
    }
  }

  .e-mention.e-popup .e-dropdownbase {
    min-height: $ddl-list-line-height;
  }

  .e-mention .e-dropdownbase .e-list-item .e-highlight {
    display: inline;
    font-weight: bold;
    vertical-align: baseline;
  }

  .e-mention .e-mention-chip,
  .e-mention .e-mention-chip:hover {
    @if $skin-name != 'Material3' {
      background: $mention-chip-bg-color;
    }
    border-radius: $mention-chip-border-radius;
    border: $mention-chip-border;
    color: $mention-active-font-color;
    cursor: default;
    @if $skin-name == 'tailwind3' {
      font-weight: $font-weight-medium;
    }
  }

  .e-mention.e-editable-element {
    border: $ddl-two-width solid $ddl-list-border-color;
    height: $ddl-auto-height;
    min-height: $ddl-mention-editable-min-height;
    width: $ddl-full-width;
  }

  .e-form-mirror-div {
    white-space: pre-wrap;
  }

  .e-small.e-ddl .e-dropdownbase.e-nodata,
  .e-small .e-ddl .e-dropdownbase.e-nodata {
    @if ($skin-name == 'FluentUI' or $skin-name == 'tailwind') {
      font-size: $ddl-small-list-nodata-font-size;
    }
  }

  .e-rtl .e-dropdownbase.e-dd-group .e-list-item {
    padding-right: $ddl-group-list-padding-left;
  }

  .e-dropdownbase.e-dd-group .e-list-item {
    padding-left: $ddl-group-list-padding-left;
    text-indent: $ddl-zero-spacing;
  }

  .e-small .e-dropdownbase.e-dd-group .e-list-item {
    padding-left: $ddl-group-list-small-padding-left;
    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
      text-indent: $ddl-zero-spacing;
    }
  }

  .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-dropdownbase.e-dd-group .e-list-group-item {
    text-indent: $ddl-group-list-item-text-intent;
  }

  .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-dropdownbase.e-dd-group .e-list-group-item {
    cursor: pointer;
    font-weight: normal;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
    width: $ddl-full-width;
    @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5.3' {
      font-weight: $popup-multi-select-font-size;
    }
  }

  .e-rtl.e-multiselect-group .e-dropdownbase.e-dd-group .e-list-item {
    padding-right: $ddl-group-list-padding-left;
  }
}

@include export-module('dropdownbase-theme') {
  .e-rtl {
    #{if(&, '&', '*')} .e-dropdownbase {
      #{if(&, '&', '*')} .e-list-item {
        padding-left: $ddl-list-rtl-padding-left;
        padding-right: $ddl-list-rtl-padding-right;
      }

      #{if(&, '&', '*')}.e-dd-group .e-list-item {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-group-list-padding-left;
        }
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-list-header-padding-left;
        }
      }
    }
  }

  .e-small.e-rtl,
  .e-small .e-rtl,
  .e-rtl .e-small {
    #{if(&, '&', '*')} .e-dropdownbase {
      #{if(&, '&', '*')} .e-list-item {
        padding-left: $ddl-list-rtl-padding-left;
        padding-right: $ddl-list-rtl-padding-right;
      }

      #{if(&, '&', '*')}.e-dd-group .e-list-item {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-group-list-small-padding-left;
        }
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-list-header-small-padding-left;
        }
      }
    }
  }

  .e-dropdownbase {
    border-color: $ddl-list-border-color;
    @if $skin-name == 'Material3' {
      background: $ddl-list-bg-color;
    }
    @at-root {
      #{if(&, '&', '*')} .e-list-item {
        /* stylelint-disable property-no-vendor-prefix */
        -webkit-tap-highlight-color: $ddl-list-tap-color;
        border-bottom: $ddl-list-bottom-border;
        border-color: $ddl-list-gradient-color;
        color: $ddl-list-default-font-color;
        font-family: $ddl-list-font-family;
        font-size: $ddl-list-font-size;
        line-height: $ddl-list-line-height;
        min-height: $ddl-list-line-height;
        padding-right: $ddl-list-padding-right;
        text-indent: $ddl-list-text-indent;
        @if $skin-name == 'Material3' {
          background: $ddl-list-bg-color;
        }
        @if $skin-name != 'Material3' {
          background-color: $ddl-list-bg-color;
        }
        @if $skin-name == 'fluent2' {
          margin-bottom: 2px;
        }
      }

      #{if(&, '&', '*')} .e-list-group-item,
      .e-fixed-head {
        border-color: $ddl-list-gradient-color;
        color: $ddl-list-header-font-color;
        font-family: $ddl-list-font-family;
        font-size: $ddl-list-header-font-size;
        font-weight: $ddl-header-font-weight;
        line-height: $ddl-list-line-height;
        min-height: $ddl-list-line-height;
        padding-left: $ddl-list-header-padding-left;
        padding-right: $ddl-list-padding-right;
        overflow: hidden;
        text-overflow: ellipsis;
        @if $skin-name == 'Material3' {
          background: $ddl-list-bg-color;
        }
        @if $skin-name != 'Material3' {
          background-color: $ddl-list-bg-color;
        }
      }

      #{if(&, '&', '*')} .e-list-item.e-active,
      #{if(&, '&', '*')} .e-list-item.e-active.e-hover {
        @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
          background: $ddl-list-active-bg-color;
        }
        @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
          background-color: $ddl-list-active-bg-color;
        }
        border-color: $ddl-list-active-border-color;
        color: $ddl-list-active-font-color;
      }

      #{if(&, '&', '*')} .e-list-item.e-hover {
        @if $skin-name == 'Material3' {
          background: $ddl-list-hover-bg-color;
        }
        @if $skin-name != 'Material3' {
          background-color: $ddl-list-hover-bg-color;
        }
        border-color: $ddl-list-hover-border-color;
        color: $ddl-list-hover-font-color;
      }

      #{if(&, '&', '*')} .e-list-item:active {
        @if $skin-name == 'Material3' {
          background: $ddl-list-pressed-bg-color;
        }
      }

      #{if(&, '&', '*')} .e-list-item:last-child {
        border-bottom: $ddl-last-child-bottom-border;
      }

      #{if(&, '&', '*')} .e-list-item.e-item-focus {
        @if $skin-name == 'Material3' {
          background: $ddl-list-focus-bg-color;
        }
        @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
          background-color: $ddl-list-hover-bg-color;
        }
        @if $skin-name == 'fluent2' {
          color: $ddl-list-hover-font-color;
          background: $ddl-list-focus-bg-color;
        }
      }

      #{if(&, '&', '*')} .e-list-item.e-active:last-child {
        @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
          border-radius: 2px;
        }
      }
    }
  }

  .e-mention .e-dropdownbase .e-list-item {
    @if $skin-name == 'fluent2' {
      margin-bottom: 0;
    }
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open th,
  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open td {
    display: table-cell;
    overflow: hidden;
    padding-right: $ddl-multi-column-popup-padding-right;
    text-indent: 10px;
    text-overflow: ellipsis;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open th {
    line-height: $ddl-multi-column-popup-line-height;
    text-align: left;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open .e-ddl-header {
    @if $skin-name == 'Material3' {
      background: $ddl-list-bg-color;
    }
    @if $skin-name != 'Material3' {
      background-color: $ddl-list-bg-color;
    }
    border-color: $ddl-multi-column-border-color;
    border-style: solid;
    border-width: $ddl-multi-column-border-width;
    color: $ddl-list-header-font-color;
    font-family: $ddl-list-font-family;
    font-size: $ddl-group-list-font-size;
    font-weight: $ddl-header-font-weight;
    text-indent: 10px;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open .e-dropdownbase .e-list-item {
    padding-right: $ddl-list-zero-padding;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open#{&}.e-scroller .e-ddl-header {
    padding-right: $ddl-multi-popup-scroll-head-pad-right;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open .e-ddl-header,
  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open#{&}.e-ddl-device .e-ddl-header {
    padding-right: $ddl-list-zero-padding;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open .e-text-center {
    text-align: center;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open .e-text-right {
    text-align: right;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open .e-text-left {
    text-align: left;
  }

  .e-small .e-dropdownbase,
  .e-dropdownbase.e-small {
    @at-root {
      #{if(&, '&', '*')} .e-list-item {
        color: $ddl-small-list-font-color;
        line-height: $ddl-small-line-height;
        min-height: $ddl-small-line-height;
        text-indent: $ddl-small-list-text-indent;
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        font-size: $ddl-small-list-header-font-size;
        line-height: $ddl-small-line-height;
        min-height: $ddl-small-line-height;
        padding-left: $ddl-list-header-small-padding-left;
      }

      #{if(&, '&', '*')} .e-list-item .e-list-icon {
        font-size: $ddl-small-icon-font-size;
      }
    }
  }

  .e-ddl.e-popup.e-multiselect-group .e-list-group-item {
    @if $skin-name == 'Material3' {
      background: $ddl-list-bg-color;
    }
    @if $skin-name != 'Material3' {
      background-color: $ddl-list-bg-color;
    }
    border-bottom: $ddl-list-bottom-border;
    border-color: $ddl-list-gradient-color;
    color: $ddl-list-default-font-color;
    font-family: $ddl-list-font-family;
    text-indent: $ddl-list-text-indent;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
      color: $ddl-list-header-font-color;
    }
    @if $skin-name != 'tailwind' and $skin-name != 'FluentUI' {
      font-size: $ddl-list-font-size;
      padding-right: $ddl-list-padding-right;
    }
  }

  .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-item-focus {
    @if $skin-name == 'Material3' {
      background: $ddl-list-hover-bg-color;
    }
    @if $skin-name != 'Material3' {
      background-color: $ddl-list-hover-bg-color;
    }
  }

  .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-active,
  .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-active.e-hover {
    @if $skin-name == 'Material3' {
      background: $ddl-list-active-bg-color;
    }
    @if $skin-name != 'Material3' {
      background-color: $ddl-list-active-bg-color;
    }
    border-color: $ddl-list-active-border-color;
    color: $ddl-list-active-font-color;
  }

  .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-hover {
    @if $skin-name == 'Material3' {
      background: $ddl-list-hover-bg-color;
    }
    @if $skin-name != 'Material3' {
      background-color: $ddl-list-hover-bg-color;
    }
    border-color: $ddl-list-hover-border-color;
    color: $ddl-list-hover-font-color;
    @if $skin-name == 'FluentUI' {
      color: $ddl-list-header-font-color;
    }
  }

  .e-dropdownbase .e-list-item .e-list-icon {
    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
      color: $ddl-list-icon-color;
    }
  }

  .e-selectall-parent.e-item-focus{
    background-color: $ddl-list-hover-bg-color;
  }
}

@include export-module('dropdownbase-bigger') {

  .e-bigger .e-dropdownbase,
  .e-dropdownbase.e-bigger {
    min-height: $bgr-drop-base-height;
    @at-root {
      #{if(&, '&', '*')} .e-list-item {
        line-height: $ddl-line-height;
        text-indent: $ddl-bigger-text-indent;
        @if $skin-name == 'tailwind3' {
          min-height: $ddl-line-height;
        }
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        line-height: $ddl-line-height;
        @if $skin-name != 'tailwind' {
          text-indent: $ddl-bigger-text-indent;
        }
      }

      #{if(&, '&', '*')} .e-list-item .e-list-icon {
        font-size: $ddl-bgr-list-item-icon-font-size;
      }
    }
  }

  .e-bigger.e-ddl .e-dropdownbase.e-nodata,
  .e-bigger .e-ddl .e-dropdownbase.e-nodata {
    @if ($skin-name == 'FluentUI' or $skin-name == 'tailwind') {
      font-size: $ddl-bigger-list-nodata-font-size;
    }
  }

  .e-bigger.e-small.e-ddl .e-dropdownbase.e-nodata,
  .e-bigger.e-small .e-ddl .e-dropdownbase.e-nodata {
    @if ($skin-name == 'FluentUI' or $skin-name == 'tailwind') {
      font-size: $ddl-bigger-small-list-nodata-font-size;
    }
  }

  .e-bigger .e-dropdownbase.e-dd-group .e-list-item {
    padding-left: $ddl-group-list-bigger-padding-left;
    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
      text-indent: $ddl-zero-spacing;
    }
  }

  .e-small.e-bigger .e-dropdownbase.e-dd-group .e-list-item {
    padding-left: $ddl-group-list-bigger-small-padding-left;
    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
      text-indent: $ddl-zero-spacing;
    }
  }

  .e-bigger.e-rtl,
  .e-bigger .e-rtl,
  .e-rtl .e-bigger {
    #{if(&, '&', '*')} .e-dropdownbase {
      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-list-header-bigger-padding-left;
        }
      }

      #{if(&, '&', '*')}.e-dd-group .e-list-item {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-group-list-bigger-padding-left;
        }
      }
    }
  }

  .e-small.e-bigger.e-rtl,
  .e-small.e-bigger .e-rtl,
  .e-rtl .e-small.e-bigger,
  .e-small .e-rtl.e-bigger,
  .e-bigger .e-rtl.e-small {
    #{if(&, '&', '*')} .e-dropdownbase {
      #{if(&, '&', '*')} .e-list-item {
        padding-left: $ddl-list-rtl-padding-left;
        padding-right: $ddl-list-rtl-padding-right;
      }

      #{if(&, '&', '*')}.e-dd-group .e-list-item {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-group-list-bigger-small-padding-left;
        }
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-list-header-bigger-small-padding-left;
        }
      }
    }
  }

  .e-bigger .e-dropdownbase {
    @at-root {
      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        font-size: $ddl-bigger-list-header-font-size;
        padding-left: $ddl-list-header-bigger-padding-left;
      }
    }
  }

  .e-bigger.e-small .e-dropdownbase,
  .e-dropdownbase.e-bigger.e-small  {
    @at-root {
      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        font-size: $ddl-bigger-small-list-header-font-size;
      }
    }
  }

  .e-bigger.e-small .e-dropdownbase,
  .e-dropdownbase.e-small.e-bigger {
    @at-root {
      #{if(&, '&', '*')} .e-list-item {
        color: $ddl-bigger-small-list-font-color;
        line-height: $ddl-bigger-small-line-height;
        min-height: $ddl-bigger-small-line-height;
        text-indent: $ddl-bigger-small-list-text-indent;
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        line-height: $ddl-bigger-small-line-height;
        min-height: $ddl-bigger-small-line-height;
        padding-left: $ddl-list-header-bigger-small-padding-left;
      }

      #{if(&, '&', '*')} .e-list-item .e-list-icon {
        font-size: $ddl-bigger-small-icon-font-size;
      }
    }
  }

  .e-bigger .e-dropdownbase .e-list-group-item,
  .e-bigger .e-fixed-head,
  .e-bigger.e-dropdownbase .e-list-group-item,
  .e-bigger.e-fixed-head {
    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
      font-size: $text-sm;
    }
  }

  .e-bigger.e-small .e-dropdownbase .e-list-group-item,
  .e-bigger.e-small .e-fixed-head,
  .e-bigger.e-small.e-dropdownbase .e-list-group-item,
  .e-bigger.e-small.e-fixed-head {
    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
      font-size: $text-xs;
    }
  }

  .e-bigger .e-dropdownbase .e-list-item .e-list-icon {
    @if $skin-name == 'tailwind' or $skin-name == 'fluent2' {
      padding-inline-end: $ddl-bgr-dropbase-list-icon-padding;
    }
  }

  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
    @if $skin-name == 'tailwind' or $skin-name == 'fluent2' {
      padding-inline-end: $ddl-bgr-small-dropbase-list-icon-padding;
    }
  }

  .e-bigger .e-dropdownbase .e-list-item .e-list-icon,
  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
    @if $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'fabric-dark' or $skin-name == 'fabric' or $skin-name == 'FluentUI' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
      padding-inline-end: $ddl-bgr-dropbase-list-icon-item-padding;
    }
  }

  .e-bigger .e-dropdownbase .e-list-item .e-list-icon {
    @if $skin-name == 'bootstrap4' {
      font-size: 16px;
    }
  }

  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
    @if $skin-name == 'material-dark' or $skin-name == 'material' or $skin-name == 'Material3' {
      padding: $bigger-dropdown-base-list-item-icon-padding;
    }
  }
}