// Select Option
$option-wrap-bg = #F1F3F5
$option-wrap-border-color = #CACCD4
$option-wrap-box-shadow = 4px 4px 16px rgba(0,0,0,0.16)

$option-wrap-radius = 4px
$option-wrap-padding = 4px 0

$option-padding-default = 4px 11px

$option-color = #191919
$option-hover-color = $option-color
$option-hover-bg = #E1EDFA
$option-active-color = #006CE1

.uif-dropdown
  z-index 2

.uif-drop-menu
  display inline-block
  .uif-popper-reference
    display inline-block
    position relative
    cursor pointer

.uif-dm-items-wrapper
  padding $option-wrap-padding
  background-color $option-wrap-bg
  border-radius $option-wrap-radius
  border 1px solid $option-wrap-border-color
  box-shadow $option-wrap-box-shadow
  min-width $drop-menu-min-width
  &-icon > .uif-dm-item .uif-dm-item-text
    padding-left 24px
  &-icon > .uif-dm-item-icon .uif-dm-item-text
    padding-left 8px
.uif-dm-item
  display flex
  align-items center
  padding $option-padding-default
  s-font-body()
  position relative
  &-line
    margin $drop-menu-line-margin
    border-bottom 1px solid $drop-menu-line-color
  &-disabled
    cursor not-allowed
    color $drop-menu-item-disabled-color
  &-skip
    color $option-color
  &-available
    color $option-color
    & > .uif-dm-item-text
      cursor pointer
    &:hover
      background-color $option-hover-bg
  &-available:hover > .uif-dm-items-wrapper
  &-skip:hover > .uif-dm-items-wrapper
    display block
  &-active
  &-active:hover
    color $option-active-color
  & > .uif-dm-item-text
    s-ellipsis()
    width 0
    flex auto
  & > .uif-dm-items-wrapper
    display none
    position absolute
    left $drop-menu-sub-left
    top $drop-menu-sub-top
    &-invert
      left unset
      right $drop-menu-sub-left