.cmi-select-input

+user-select(none)
&::after
  +position(absolute, 0 0 auto auto)
  +user-select(none)
  border: none
  outline: none
  font: normal normal normal 20px/1 MaterialDesignIcons
  content: "\f381"
  pointer-events: none
  color: rgba(#000, 0.5)
&:hover
  &::after
    color: rgba(#000, 1)
.cmi-input
  +user-select(none)
  cursor: pointer

.cmi-select-list

+box-sizing(border-box)
+position(absolute, 0 auto auto 0)
+cmi-box-shadow(0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12))
display: none
overflow: none
white-space: normal
z-index: 800
margin: 16px 0 16px 0
padding: 0
background-color: #fff
pointer-events: none
&.cmi-select-list-scroll
  overflow: auto
  overflow-y: scroll
ul
  +box-sizing(border-box)
  margin: 0
  padding: 0
  list-style: none
  background-color: #fff
  pointer-events: none
  white-space: normal
li
  +user-select(none)
  padding: 10px 15px
  cursor: pointer
  font-size: 14px
  line-height: 20px
  pointer-events: none
  &:hover
    background-color: #f0f0f0
  &.cmi-select-selected
    background-color: $color-primary

.cmi-select-select-hidden

display: none

.cmi-select-list-open

overflow: hidden

// open state .cmi-select-input.cmi-select-open

.cmi-select-list.cmi-select-open

display: block
pointer-events: all
ul, li
  cursor: pointer
  pointer-events: all