body
  .choices.is-open
    z-index: 5
  .choices__inner
    background-color: var(--input-background)
    border-color: var(--input-border)
    padding: .25rem
    border-radius: 4px
    min-height: 2.5rem
  .choices.is-focused .choices__inner
    background-color: var(--base)
  .choices[data-type*=select-one] .choices__inner
    padding-block: 0
    display: flex

  .choices__list--single
    padding: .25rem 2.5rem .25rem .5rem
    display: flex
    align-items: center
    .choices__item
      white-space: nowrap
      text-overflow: ellipsis
      overflow: hidden

  .choices__list--multiple
    .choices__item,
    .choices__item[data-deletable]
      display: inline-block
      position: relative
      max-width: calc(100% - .25rem)
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap
      align-items: center
      border-color: var(--input-selected-border)
      color: var(--input-selected-text)
      background-color: var(--input-selected-background)
      border-radius: 4px
      line-height: calc(1.75rem - .125rem)
      height: 1.75rem
      padding: 0 2.25rem 0 .5rem
      margin: .125rem
      &.is-highlighted
        border-color: var(--input-selected-border)
        color: var(--input-selected-text)
        background-color: var(--input-selected-background)

  .choices[data-type*=select-multiple] .choices__button,
  .choices[data-type*=text] .choices__button
    border-left-color: var(--input-selected-border)
    color: var(--input-selected-text)
    height: 100%
    background-image: $choices-icon-cross
    margin: 0 0 0 .5rem
    width: 1.75rem
    +position(absolute, right 0, top 0)
    transition: all .2s ease-out
    &:hover
      background-color: var(--primary-semi-tint)
      background-image: $choices-icon-cross-inverse

.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item
  line-height: 1.5
  padding: .5rem
  &:not(:first-child)
    border-top: solid 1px var(--border-tint)
