@import "../common/main.styl"

inputRadius = .25rem
menuRadius = inputRadius
inputPaddingLeft = .75rem

.IZ-select
  position: relative
  outline: none

  .IZ-select__input
    font-weight: 400
    font-size: 1rem
    line-height: 1.5

    input
      height: calc(1.5em + .75rem)
      padding: .375rem inputPaddingLeft

  &--sm
    .IZ-select__input
      border-radius: .2rem

      input
        height: calc(1.5em + .5rem)
        padding: .25rem .5rem
        font-size: .875rem
        line-height: 1.5

  &--lg
    .IZ-select__input
      border-radius: .3rem

      input
        height: calc(1.5em + 1rem)
        padding: .5rem 1rem
        font-size: 1.25rem
        line-height: 1.5

//.IZ-select *
//  font-size: 16px
//  font-weight: 400
//  font-family: sans-serif

.IZ-select__input
  align-items: center
  display: flex
  flex: 1 1 auto
  flex-wrap: wrap
  width: 100%
  color: #495057
  background-color: #fff
  background-clip: padding-box
  border: 1px solid #ced4da
  border-radius: inputRadius
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out

  &.IZ-select__input--has-menu
    //border-bottom: 0
    //border-bottom-left-radius: 0
    //border-bottom-right-radius: 0

  &.IZ-select__input--selection-slot
    padding-left: inputPaddingLeft

    input
      padding-left: 10px

  &.IZ-select__input--has-error
    border: 1px solid #dc3545 !important
    caret-color: #ff5252 !important

    input
      color: #ff5252 !important

  &.IZ-select__input--successful
    border: 1px solid #28a745 !important
    caret-color: #28c346 !important

  &.IZ-select__input--focused
    border-color: #80bdff
    outline: 0
    box-shadow: 0 0 0 0.2rem rgba(128, 189, 255, 0.5)

    &.IZ-select__input--has-error
      box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important

    &.IZ-select__input--successful
      box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important

  &.IZ-select__input--disabled
    pointer-events: none
    background-color: #e9ecef
    opacity: 1

    input
      color: #6c737a !important

    &::placeholder
      color: #6c737a !important

  input
    font-size: 1rem
    /* Loading indicator */
    background-size: 25px 25px
    background-position: right 10px center
    background-repeat: no-repeat
    color: #495057 !important
    background-color: transparent
    border-style: none
    pointer-events: auto
    flex: 1 1
    margin-top: 0
    min-width: 0
    position: relative
    line-height: 20px
    //padding: 8px 0
    max-width: 100%
    width: 100%

    &:focus
      outline: none

    &:disabled
      pointer-events: none

.IZ-select__menu
  opacity 0
  transition: opacity 0.1s
  position: absolute
  z-index: 8
  transform-origin: left top 0 // на всякий случай
  background-color: #fff
  border: 1px solid #ced4da
  // не забудь поменять для &.IZ-select__menu--disable-search (ниже) стили рамки
  border-radius: menuRadius
  box-shadow: 0 2px 11px -2px rgba(0, 0, 0, 0.19)

  &--at-top
    border-bottom: 0
    border-bottom-left-radius: 0
    border-bottom-right-radius: 0

    &.IZ-select__menu--disable-search
      border-bottom: 1px
      border-bottom-left-radius: menuRadius
      border-bottom-right-radius: menuRadius

  &--at-bottom
    border-top: 0
    border-top-left-radius: 0
    border-top-right-radius: 0

    &.IZ-select__menu--disable-search
      border-top: 1px
      border-top-left-radius: menuRadius
      border-top-right-radius: menuRadius

  .IZ-select__menu-items
    overflow-y: auto
    overflow-x: hidden

  .IZ-select__no-data
    margin: 0 10px

.IZ-select__item
  cursor: pointer
  padding: 10px 14px
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1)

  &:hover
    background-color: #f2f2f2

  &.IZ-select__item--selected
    color: #1976d2 !important
    //background-color: lightgrey

.IZ-select__error
  margin-top: .55rem
  font-size: 85%
  color: #dc3545