%chosen-container

position: relative
display: inline-block
vertical-align: middle
font-size: 13px
zoom: 1
*display: inline
-webkit-user-select: none
-moz-user-select: none
user-select: none

.chosen-drop
  position: absolute
  top: 100%
  left: -9999px
  z-index: 1010
  width: 100%
  border-top: 0

&.chosen-with-drop .chosen-drop
  left: 0

a
  cursor: pointer

+breakpoint($hidpi)
  .chosen-rtl .chosen-search input[type="text"],
  .chosen-container-single .chosen-single abbr,
  .chosen-container-single .chosen-single div b,
  .chosen-container-single .chosen-search input[type="text"],
  .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
  .chosen-container .chosen-results-scroll-down span,
  .chosen-container .chosen-results-scroll-up span
    background-image: url('chosen-sprite@2x.png') !important
    background-size: 52px 37px !important
    background-repeat: no-repeat !important

%chosen-single-chosen

.chosen-single
  position: relative
  display: block
  overflow: hidden
  padding: 8px 25px 0 8px
  height: $form-element-height
  //border-radius: 5px
  background: no-repeat 95% 50%
  +svg-bg-simple("arrow-down")
  background-clip: padding-box
  text-decoration: none
  white-space: nowrap
  font-size: 14px
  line-height: 24px
  span
    display: block
    overflow: hidden
    margin-right: 26px
    text-overflow: ellipsis
    white-space: nowrap
  abbr
    position: absolute
    top: 6px
    right: 26px
    display: block
    width: 12px
    height: 12px
    background: url('chosen-sprite.png') -42px 1px no-repeat
    font-size: 1px
  abbr:hover
    background-position: -42px -10px
  div
    position: absolute
    top: 0
    right: 0
    display: block
    width: 18px
    height: 100%
  div b
    display: block
    width: 100%
    height: 100%
    background: url('chosen-sprite.png') no-repeat 0px 2px

&.chosen-disabled .chosen-single abbr:hover
  background-position: -42px -10px
.chosen-single-with-deselect span
  margin-right: 38px

.chosen-search
  position: relative
  z-index: 1010
  margin: 0
  padding: 3px 4px
  white-space: nowrap
  input[type="text"]
    margin: 1px 0
    padding: 4px 20px 4px 5px
    width: 100%
    height: auto
    outline: 0
    background: white url('chosen-sprite.png') no-repeat 100% -20px
    background: url('chosen-sprite.png') no-repeat 100% -20px
    font-size: 1em
    font-family: sans-serif
    line-height: normal
    border-radius: 0

.chosen-drop
  margin-top: -1px
  border-radius: 0 0 4px 4px
  background-clip: padding-box

&.chosen-container-single-nosearch .chosen-search
  position: absolute
  left: -9999px

%chosen-results

position: relative
overflow-x: hidden
overflow-y: auto
margin: 0 4px 4px 0
padding: 0 0 0 4px
max-height: 240px
-webkit-overflow-scrolling: touch
li
  display: none
  margin: 0
  padding: 5px 6px
  list-style: none
  line-height: 15px
  -webkit-touch-callout: none
  &.active-result
    display: list-item
    cursor: pointer
  &.disabled-result
    display: list-item
    cursor: default
  &.no-results
    display: list-item
  &.group-result
    display: list-item
    font-weight: bold
    cursor: default
  &.group-option
    padding-left: 15px
  em
    font-style: normal
    text-decoration: underline

%chosen-multi-chosen

.chosen-choices
  position: relative
  overflow: hidden
  margin: 0
  padding: 0
  width: 100%
  height: auto !important
  height: 1%
  border: 1px solid #aaa
  cursor: text
  li
    float: left
    list-style: none
  li.search-field
    margin: 0
    padding: 0
    white-space: nowrap
  li.search-field input[type="text"]
    margin: 1px 0
    padding: 5px
    height: 15px
    outline: 0
    font-size: 100%
    font-family: sans-serif
    line-height: normal
    border-radius: 0
  li.search-choice
    position: relative
    margin: 3px 0 3px 5px
    padding: 3px 20px 3px 5px
    background-clip: padding-box
    line-height: 13px
    cursor: default
  li.search-choice .search-choice-close
    position: absolute
    top: 4px
    right: 3px
    display: block
    width: 12px
    height: 12px
    background: url('chosen-sprite.png') -42px 1px no-repeat
    font-size: 1px
  li.search-choice .search-choice-close:hover
    background-position: -42px -10px
  li.search-choice-focus .search-choice-close
    background-position: -42px -10px

.chosen-results
  margin: 0
  padding: 0
.chosen-drop .result-selected
  display: list-item
  cursor: default

%chosen-active

&.chosen-with-drop 
  .chosen-single
    border: 1px solid #aaa
    -moz-border-radius-bottomright: 0
    border-bottom-right-radius: 0
    -moz-border-radius-bottomleft: 0
    border-bottom-left-radius: 0
    div
      border-left: none
      background: transparent

    div b
      background-position: -18px 2px

%chosen-disabled-support

.chosen-disabled
  opacity: 0.5 !important
  cursor: default

.chosen-disabled .chosen-single
  cursor: default

.chosen-disabled .chosen-choices .search-choice .search-choice-close
  cursor: default

%chosen-rtl

.chosen-rtl
  text-align: right

  .chosen-single
    overflow: visible
    padding: 0 8px 0 0
    span
      margin-right: 0
      margin-left: 26px
      direction: rtl
    div
      right: auto
      left: 3px
    abbr
      right: auto
      left: 26px

  .chosen-single-with-deselect span
    margin-left: 38px

  .chosen-choices 
    li
      float: right
    li.search-field input[type="text"]
      direction: rtl
    li.search-choice
      margin: 3px 5px 3px 0
      padding: 3px 5px 3px 19px
    li.search-choice .search-choice-close
      right: auto
      left: 4px

  &.chosen-container-single-nosearch .chosen-search,
  .chosen-drop
    left: 9999px

  &.chosen-container-single .chosen-results
    margin: 0 0 4px 4px
    padding: 0 4px 0 0

  .chosen-results li.group-option
    padding-right: 15px
    padding-left: 0

  &.chosen-container-active.chosen-with-drop .chosen-single div
    border-right: none

  .chosen-search input[type="text"]
    padding: 4px 5px 4px 20px
    background: white url('chosen-sprite.png') no-repeat -30px -20px
    background: url('chosen-sprite.png') no-repeat -30px -20px
    direction: rtl

  &.chosen-container-single .chosen-single div b
    background-position: 6px 2px

  &.chosen-container-single.chosen-with-drop .chosen-single div b
    background-position: -12px 2px