//layout variables
$drop-down-btn-arrow-content: '\e706' !default;
$drop-down-btn-vertical-btn-padding: 6px 12px !default;
$drop-down-btn-vertical-bigger-padding: 8px 16px !default;
$drop-down-btn-bigger-font-size: $text-sm !default;
$drop-down-btn-bigger-li-height: 40px !default;
$drop-down-btn-bigger-max-width: 240px !default;
$drop-down-btn-bigger-min-width: 112px !default;
$drop-down-btn-icon-font-size: $text-sm !default;
$drop-down-btn-small-icon-font-size: $text-xs !default;
$drop-down-btn-icon-margin-right: 12px !default;
$drop-down-btn-bigger-icon-margin-right: 12px !default;
$drop-down-btn-li-border-width: 1px !default;
$drop-down-btn-li-height: 32px !default;
$drop-down-btn-li-padding: 0 12px !default;
$drop-down-btn-bigger-li-padding: 0 16px !default;
$drop-down-btn-small-li-padding: 0 8px !default;
$drop-down-btn-max-width: 178px !default;
$drop-down-btn-menu-icon-bigger-font-size: 22px !default;
$drop-down-btn-menu-icon-font-size: $text-lg !default;
$drop-down-btn-min-width: 120px !default;
$drop-down-btn-seperator-padding: 3px 0 !default;
$drop-down-btn-sub-ul-box-shadow: none !default;
$drop-down-btn-ul-border-radius: 8px !default;
$drop-down-btn-ul-padding: 4px 0 !default;
$drop-down-btn-ul-bigger-padding: 4px 0 !default;
$drop-down-btn-ul-small-padding: 4px 0 !default;
$drop-down-btn-caret-icon-font-size: $text-sm !default;
$drop-down-btn-small-caret-icon-font-size: $text-xs !default;
$drop-down-btn-icon-font-size-bigger: $text-lg !default;
$drop-down-btn-small-icon-font-size-bigger: $text-base !default;
$drop-down-btn-caret-icon-font-size-bigger: $text-lg !default;
$drop-down-btn-small-caret-icon-font-size-bigger: $text-base !default;
$drop-down-btn-box-shadow: $secondary-shadow-focus !default;
$drop-down-btn-popup-margin-top: 4px !default;
$drop-down-btn-bigger-popup-margin-top: 4px !default;
$drop-down-btn-ul-border: 1px solid $border-light !default;
$drop-down-btn-li-box-shadow: none !default;
$drop-down-btn-li-border-style: solid !default;
$drop-down-btn-color: $secondary-text-color !default;
$drop-down-btn-disable-text: $secondary-text-color-disabled !default;
$drop-down-btn-font-size: $text-sm !default;
$drop-down-btn-font-weight: $font-weight-medium !default;
$drop-down-btn-li-bgcolor: $content-bg-color-hover !default;
$drop-down-btn-ul-bgcolor: $flyout-bg-color !default;
$drop-down-btn-li-border-color: $border-light !default;
$drop-down-btn-selected-color: $content-text-color !default;
$drop-down-btn-parent-ul-box-shadow: $shadow-lg !default;
$drop-down-btn-li-focus-bgcolor: $content-bg-color-hover !default;
$drop-down-btn-li-selection-bgcolor: $flyout-bg-color-selected !default;
$drop-down-btn-li-selection-font-color: $content-text-color !default;
$drop-down-btn-menu-icon-color: $secondary-text-color !default;
$drop-down-btn-menu-icon-disabled-color: $secondary-text-color-disabled !default;

.e-dropdown-popup {
  position: absolute;
  @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $theme-name == 'tailwind-dark' or $theme-name == 'bootstrap5-dark' {
    border-radius: $drop-down-btn-ul-border-radius;
    margin-top: $drop-down-btn-popup-margin-top;
  }

  & ul {
    border: $drop-down-btn-ul-border;
    border-radius: $drop-down-btn-ul-border-radius;
    box-shadow: $drop-down-btn-parent-ul-box-shadow;
    box-sizing: border-box;
    font-size: $drop-down-btn-font-size;
    font-weight: $drop-down-btn-font-weight;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    min-width: $drop-down-btn-min-width;
    overflow: hidden;
    padding: $drop-down-btn-ul-padding;
    user-select: none;
    white-space: nowrap;
    
    & .e-item  {
      cursor: pointer;
      display: flex;
      height: $drop-down-btn-li-height;
      line-height: $drop-down-btn-li-height;
      padding: $drop-down-btn-li-padding;
      margin: 0 6px;
      border-radius: 6px;
      
      &.e-url {
        padding: 0;
      }
    }
  }
}