select.numeric {
  // Right align selects with numeric content
  // see https://stackoverflow.com/a/43919388
  text-align-last: right;
  option {
    direction: rtl;
  }
}

.dropdown:not(.bs-dropdown),
.autocompleteWrapper {
  position: relative;
  user-select: none;
}

.dropdownList {
  position: absolute; // do not expand DOM size when showing items
  display: none;
  overflow: auto;
  z-index: 100; // = .ui-front
  max-height: 200px;
  min-width: 100%;

  .dropdown &, .autocompleteWrapper &,
  .right-down & {
    // .right-down is the default
    margin-top: -1px; // Overlap bottom border of dropdown value / ac input
  }
  .left-up &, .left-down & {
    right: 0;
  }
  .left-up &, .right-up & {
    bottom: 100%;
    margin-bottom: -1px; // Overlap top border of dropdown value / ac input
    margin-top: 0;
  }
  .group-label {
    display: block;
    cursor: default;
    margin: 0;
    color: mix($inputBackgroundColor, $inputForegroundColor, 90%);
    background-color: $inputForegroundColor;
  }

  ul {
    padding-left: 5px;
  }
}

.dropdown:not(.bs-dropdown) .dropdownValue,
.dropdownList li:not(.nested-group),
.dropdownList .group-label {
  padding: 5px;
}
.dropdownList li {
  cursor: pointer;
  display: block;
  font-weight: 400;
  color: var(--bs-body-color);
  &:not(.nested-group):hover {
    background-color: mix($inputBackgroundColor, $inputForegroundColor, 90%);
  }
}

.dropdown:not(.bs-dropdown) {
  select {
    z-index: -1; // not using display: none to show native HTML tooltip when required field is missing
    position: absolute;
    user-select: none;
    left: 3px;
    top: 3px;
    max-width: 1px;
  }
  &.numeric {
    text-align: right;
  }
  line-height: 1.5;   // Need known line height for min-height calculations
  .dropdownValue {
    min-height: calc(1.5em + 12px);   // Line height * font size + padding + border
    overflow-x: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    font-weight: 400;
    color: var(--bs-body-color);
    &.iconDown {
      padding-right: 2em;
    }
    &.iconDown:after {
      content: "\f078"; // =.fa-chevron-down
      font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 5 Pro";
      position: absolute;
      right: 0;
      margin-right: .5em;
    }
  }
}

.dropdown[disabled] {

    .dropdownValue {
        background-color: mix($inputBackgroundColor, $inputForegroundColor, 90%);
    }
}
