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

.dropdown{
  cursor:pointer;
  position: relative;
  color: $inputForegroundColor;
  border: solid 1px lighten($thirdColor, 15%);
  padding-right: $space + $space/2;
  background-color: $inputBackgroundColor;
  &.numeric {
    text-align: right;
  }

  .dropdownValue, .dropdownList {
    user-select: none;
    line-height: $inputHeight;
  }
  .dropdownValue {
    min-height: $inputHeight;   // =line-height; fixes visual collapse with empty initial value
    padding-left: 5px;
    &.iconDown:before{
      position: absolute;
      right: 0;
      margin-right: .5em;
    }
  }
  .dropdownList {
    background-color: inherit;
    margin-left: 0 !important;  // defeat icon follower margin inside .toolBar
    position: absolute;
    z-index: 10;
    display:none;
    overflow: auto;
    max-height:200px;
    border:solid 1px lighten($thirdColor, 15%);
    width: 100%;
    .group-label {
      display: block;
      padding-left: 5px;
      padding-right: 5px;
      color: mix($inputBackgroundColor, $inputForegroundColor, 90%);
      background-color: $inputForegroundColor;
    }

    li {
      &.choice {
        padding-left: 5px;
        padding-right: 5px;
        &:hover{
          color:$ciColor;
          background-color:$contentColor;
        }
      }
    }
    ul {
      padding-left: 5px;
    }
  }
  .hiddenDropdown{
    display:none;
  }

  @extend .smallText;
}
