@import '../utilities/colors'
  
$select-background: $gray__200 !default
$select-background-hover: $gray__300 !default
$select-color: $gray__700 !default
$select-color-focus: $primary !default
$select-border-color: $gray__400 !default
$select-border-color-focus: $primary !default
  
.material-select
  box-sizing: border-box
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  display: flex
  position: relative
  height: 56px
  overflow: hidden
  will-change: opacity, transform, color

.material-select__icon
  position: absolute
  right: auto
  bottom: 16px
  left: 16px
  color: $select-color

.material-select__dropdown-icon
  position: absolute
  left: auto
  right: 8px
  bottom: 16px
  width: 24px
  height: 24px
  transition: transform .25s cubic-bezier(.4,0,.2,1), color .25s cubic-bezier(.4,0,.2,1)
  pointer-events: none

.material-select__native-control
  font-family: inherit
  box-sizing: border-box
  font-size: 16px
  line-height: 28px
  font-weight: 400
  width: 100%
  height: 56px
  text-decoration: inherit
  text-transform: inherit
  border: none
  border-bottom: 2px solid $select-border-color
  border-radius: 4px 4px 0 0
  background: $select-background
  color: $select-color
  padding: 0 16px
  outline: none
  white-space: nowrap
  cursor: pointer
  appearance: none
  -moz-appearance: none
  -webkit-appearance: none
  transition: border-color 0.25s ease

  &:focus
    border-color: $select-border-color-focus
    outline: none

    & + .material-select__dropdown-icon
      transform: rotate(180deg)
      color: $select-color-focus

  &:disabled
    cursor: default
    border-color: $gray__500
    background: $gray__300
    color: $gray__500

  & option
    background-color: $white

.material-select--leading-icon

  & .material-select__native-control
    padding-left: 48px
    padding-right: 16px

.material-select--disabled

  & .material-select__native-control
    cursor: default
    border-color: $gray__500
    background: $gray__300
    color: $gray__500

  & .material-select__dropdown-icon
    color: $gray__500