$select2-height: 2.25rem
$select2-font-size: .8125rem
$select2-border-color: var(--background-shade)
$select2-option-border-color: var(--background)
$select2-highlighted-color: rgba($main, .8)
$select2-results-height: 200px
$select2-selection-choice-border: $main
$select2-selection-choice-background: mix($main, $base, 10%)

.select2-container
  display: inline-block
  position: relative
  vertical-align: middle
  max-width: 100%
  .form-item &
    width: 100% !important

.select2-selection
  cursor: pointer
  display: block
  min-height: $select2-height

.select2-selection__rendered
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  +text-block($select2-font-size 1)

.select2-search
  line-height: 28px
  +media-breakpoint-down(sm)
    flex: 0 0 100%

// single

.select2-selection--single
  height: $select2-height
  user-select: none
  -webkit-user-select: none

.select2-selection--single .select2-selection__rendered
  display: block
  padding-left: 1em
  padding-right: 2em

.select2-selection--single .select2-selection__clear
  position: relative

.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered
  padding-right: 1em
  padding-left: 2em

// multiple

.select2-selection--multiple
  user-select: none
  -webkit-user-select: none

.select2-selection--multiple .select2-selection__rendered
  display: inline-block
  padding-left: 8px

.select2-search--inline .select2-search__field
  border: none
  font-size: 100%
  margin-top: 5px
  padding: 0

.select2-search--inline .select2-search__field::-webkit-search-cancel-button
  -webkit-appearance: none

.select2-dropdown
  background-color: white
  border: 1px solid $select2-border-color
  border-radius: 4px
  display: block
  position: absolute
  left: -100000px
  width: 100%
  z-index: 1051

.select2-results__option
  +text-block($select2-font-size 1.5)
  padding: 6px
  user-select: none
  -webkit-user-select: none
  transition: all .1s ease-out
  &:not(:last-child)
    border-bottom: dashed 1px $select2-option-border-color

.select2-results__option[aria-selected]
  cursor: pointer

.select2-results__message
  text-align: center

.select2-container--open .select2-dropdown
  left: 0

.select2-container--open .select2-dropdown--above
  border-bottom: none
  border-bottom-left-radius: 0
  border-bottom-right-radius: 0

.select2-container--open .select2-dropdown--below
  border-top: none
  border-top-left-radius: 0
  border-top-right-radius: 0

.select2-search--dropdown
  display: block
  padding: .5rem
  border-bottom: solid 1px $select2-border-color

.select2-search--dropdown .select2-search__field
  padding: 4px
  width: 100%

.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button
  -webkit-appearance: none

.select2-search--dropdown.select2-search--hide
  display: none

.select2-close-mask
  display: block
  position: fixed
  left: 0
  top: 0
  min-height: 100%
  min-width: 100%
  height: auto
  width: auto
  opacity: 0
  z-index: 99
  background-color: #fff
  filter: alpha(opacity = 0)

.select2-hidden-accessible
  border: 0 !important
  clip: rect(0 0 0 0) !important
  -webkit-clip-path: inset(50%) !important
  clip-path: inset(50%) !important
  height: 1px !important
  overflow: hidden !important
  padding: 0 !important
  position: absolute !important
  width: 1px !important
  white-space: nowrap !important

.select2-container--default .select2-selection--single
  background-color: #fff
  border: 1px solid $select2-border-color
  border-radius: 4px
  outline: 0

.select2-container--default .select2-selection--single .select2-selection__rendered
  color: #444
  line-height: $select2-height

.select2-container--default .select2-selection--single .select2-selection__clear
  cursor: pointer
  float: right
  font-weight: bold

.select2-container--default .select2-selection--single .select2-selection__placeholder
  color: #999

.select2-container--default .select2-selection--single .select2-selection__arrow
  height: $select2-height
  +position(absolute, right 1px, top 1px)
  width: 2em

.select2-container--default .select2-selection--single .select2-selection__arrow b
  border-color: #888 transparent transparent transparent
  border-style: solid
  border-width: 5px 4px 0 4px
  +size(0)
  margin-left: -4px
  margin-top: -2px
  +position(absolute, left 50%, top 50%)

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear
  float: left

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow
  left: 1px
  right: auto

.select2-container--default.select2-container--disabled .select2-selection--single
  background-color: #eee
  cursor: default

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear
  display: none

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b
  border-color: transparent transparent #888 transparent
  border-width: 0 4px 5px 4px

.select2-container--default .select2-selection--multiple
  background-color: white
  border: 1px solid $select2-border-color
  border-radius: 4px
  cursor: text

.select2-container--default .select2-selection--multiple .select2-selection__rendered
  padding: .125rem .5rem
  width: 100%
  display: flex
  flex-wrap: wrap
  margin: 0 -.25rem

.select2-container--default .select2-selection--multiple .select2-selection__placeholder
  color: #999
  margin-top: 5px

.select2-container--default .select2-selection--multiple .select2-selection__clear
  cursor: pointer
  float: right
  font-weight: bold
  margin-top: 5px
  margin-right: 10px

.select2-container--default .select2-selection--multiple .select2-selection__choice
  background-color: $select2-selection-choice-background
  border: 1px solid $select2-selection-choice-border
  color: $select2-selection-choice-border
  border-radius: 4px
  cursor: default
  margin: .125rem .25rem
  padding-right: .5rem
  display: flex
  align-items: center
  height: 1.75rem
  max-width: 100%
  overflow: hidden

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove
  cursor: pointer
  align-items: center
  justify-content: center
  +size(1.5rem 100%)
  flex: 0 0 1.5rem
  margin-right: .5rem
  +text-block(1.125rem, 700 flex)
  color: var(--reversal-text)
  background-color: $select2-selection-choice-border
  &:hover
    background-color: mix($select2-selection-choice-border, $base, 80%)

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline
  float: right

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice
  margin-inline: 5px auto

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove
  margin-inline: 2px auto

.select2-container--default.select2-container--focus .select2-selection--multiple
  outline: 0

.select2-container--default.select2-container--disabled .select2-selection--multiple
  background-color: #eee
  cursor: default

.select2-container--default.select2-container--disabled .select2-selection__choice__remove
  display: none

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple
  border-top-left-radius: 0
  border-top-right-radius: 0

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple
  border-bottom-left-radius: 0
  border-bottom-right-radius: 0

.select2-container--default .select2-search--dropdown .select2-search__field
  border: 1px solid $select2-border-color

.select2-container--default .select2-search--inline .select2-search__field
  background: transparent
  border: none
  outline: 0
  box-shadow: none
  -webkit-appearance: textfield

.select2-container--default .select2-results > .select2-results__options
  max-height: $select2-results-height
  overflow-y: auto

.select2-container--default .select2-results__option[role=group]
  padding: 0

.select2-container--default .select2-results__option[aria-disabled=true]
  color: #999

.select2-container--default .select2-results__option[aria-selected=true]
  background-color: var(--background-shade)

.select2-container--default .select2-results__option .select2-results__option
  padding-left: 1em

.select2-container--default .select2-results__option .select2-results__option .select2-results__group
  padding-left: 0

.select2-container--default .select2-results__option .select2-results__option .select2-results__option
  margin-left: -1em
  padding-left: 2em

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option
  margin-left: -2em
  padding-left: 3em

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option
  margin-left: -3em
  padding-left: 4em

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option
  margin-left: -4em
  padding-left: 5em

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option
  margin-left: -5em
  padding-left: 6em

.select2-container--default .select2-results__option--highlighted[aria-selected]
  background-color: $select2-highlighted-color
  color: var(--reversal-text)

.select2-container--default .select2-results__group
  cursor: default
  display: block
  padding: 6px
