%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