@import oh-styles

#value_select
  .chosen-container .chosen-drop, .chosen-container-single .chosen-single
    @include chzn-container-override-border
  .chosen-container-active.chosen-with-drop .chosen-single
    @include chzn-container-override-border
    box-shadow: none
  .chosen-container-single .chosen-single
    background-color: white
    background-image: none
    background: white none top left no-repeat
    filter: none
    border: 1px solid color-gradient($PRIMARY_DARK_GRAY, 120)
    height: 30px
  .chosen-container-active > .chosen-single
    @include chzn-container-override-border
  .chosen-container
    .chosen-drop
      border-top: none
      border-left: 1px solid color-gradient($SECONDARY_LIGHT_PURPLE, 100)
      border-bottom: 1px solid color-gradient($SECONDARY_LIGHT_PURPLE, 100)
      border-right: 1px solid color-gradient($SECONDARY_LIGHT_PURPLE, 100)
    .chosen-results .highlighted
      background: color-gradient($SECONDARY_LIGHT_PURPLE, 100)
      color: white
  .chosen-container-single .chosen-single
    border-radius: 0px

/* Some IE 7-9 fun with this next one - filter likes to override background

#sort_by, #add_new_badge_form
  .chosen-container-single .chosen-search:after
    color: color-gradient($SECONDARY_LIGHT_PURPLE, 100)
  .chosen-container .chosen-results li
    color: white

div.chosen label
  display: inline-block !important
  margin-right: 2px
  margin-top: 3px

#sort_by, #add_new_badge_form
  .chosen-container .chosen-drop, .chosen-container-single .chosen-single
    @include chzn-container-override-border
    background-color: color-gradient($PRIMARY_DARK_GRAY, 120)
    background-image: none
    color: white
    box-shadow: none !important
    border-radius: 0px
  .chosen-container-active.chosen-with-drop .chosen-single
    @include chzn-container-override-border
    box-shadow: none
  .chosen-container-single .chosen-single div
    background-color: color-gradient($PRIMARY_DARK_GRAY, 120)
    background: color-gradient($PRIMARY_DARK_GRAY, 120)
    color: white
    /*border: 1px solid black;
  .chosen-single div b:before
    color: white
  .chosen-container-single .chosen-single
    background-color: color-gradient($PRIMARY_DARK_GRAY, 120)
    background-image: none
    background: color-gradient($PRIMARY_DARK_GRAY, 120) none top left no-repeat
    filter: none
    border: 1px solid color-gradient($PRIMARY_DARK_GRAY, 120)
    height: 30px
  .chosen-container-active > .chosen-single
    @include chzn-container-override-border
  .chosen-container .chosen-drop
    border-top: none
    border-left: 1px solid color-gradient($SECONDARY_LIGHT_PURPLE, 100)
    border-bottom: 1px solid color-gradient($SECONDARY_LIGHT_PURPLE, 100)
    border-right: 1px solid color-gradient($SECONDARY_LIGHT_PURPLE, 100)
  .chosen-container-active .chosen-single-with-drop
    box-shadow: none
  .chosen-container .chosen-results
    .highlighted
      background: color-gradient($SECONDARY_LIGHT_PURPLE, 100)
      color: white
    .no-results
      background: color-gradient($PRIMARY_DARK_GRAY, 120)
    li em
      background: none
  .chosen-container-multi .chosen-choices
    background: color-gradient($PRIMARY_DARK_GRAY, 120)
  .chosen-container-active .chosen-choices
    @include chzn-container-override-border

/* Some IE 7-9 fun with this next one - filter likes to override background

.chosen-container-multi .chosen-choices .search-choice
  background-color: #eee
  border-radius: 0px
  background-image: none
  box-shadow: none
  background-color: #DBE4EE !important
  border-radius: 0px !important
  background-image: none !important
  box-shadow: none !important

.chosen-container-active .chosen-choices
  border: 1px solid color-gradient($SECONDARY_LIGHT_PURPLE, 100)

/* OTWO-3025 Fix for IE9 -- Chosen jQuery Dropdown to have the orange color as background

.chosen-container .chosen-results .highlighted
  filter: none
#add_new_badge_form
  .chosen-container
    width: 100% !important

.chosen-container-single .chosen-search input[type="text"]
  padding: 4px !important
  width: 97% !important
