.ffwdDropdown
.listItem
  display: flex
  align-items: center
  justify-content: center
  box-sizing: border-box
  padding: 0 20px
  cursor: pointer
  > .icon
    flex: 0 0 auto
    font-size: 24px
    margin-right: 10px
    &.up
    &.down
      font-size: 12px
      font-weight: $bold
  > .iconImg
  > .iconPlaceholder
    width: 20px
    margin: 0 15px 0 5px
  > .activeIcon
    width: 20px
    margin: 0 10px 0 0
  > .activeIconPlaceholder
    margin: 0 10px 0 0
  > .label
    flex: 1 1 0%
    font-size: 16px
    $textOverflowEllipsis()

.ffwdDropdown
  width: 250px
  background: white
  color: $primary
  user-select: none
  font-weight: $bold
  border: 2px solid alpha($lightGrey,0)
  transition: transit('box-shadow'), transit('border')
  $smallBorderRadius()
  $commonBoxShadow()
  &.inverse
    background: $primary
    color: white
  &.accent
    background: $secondary
    color: white
  &.comparison
    color: white
    background: $orange
  &.disabled
    opacity: .5
    pointer-events: none
    $commonBoxShadow(0)
    border: 2px solid $lightGrey
    &.accent
      background: $darkGrey
      color: white

.ffwdDropdownPopover
  overflow: hidden
  background: white
  padding: 0
  margin: 0
  list-style-type: none
  $smallBorderRadius()
  $commonBoxShadow()
  $webkitSmoothScrolling()
  &::-webkit-scrollbar
    -webkit-appearance: none
    width: 7px
  &::-webkit-scrollbar-thumb
    border-radius: 4px
    background-color: rgba(0, 0, 0, .5)
    box-shadow: 0 0 1px rgba(255, 255, 255, .5)
  > .listItem
    color: alpha($primary, .5)
    transition: transit('color'), transit('background')
    &:hover
      color: $primary
      background: alpha($secondary, .05)
      font-weight: $bold
    &.active
      color: $primary
      font-weight: $bold
    &.comparison
      color: $orange
      background: alpha($orange, .2)
      font-weight: bold