.lego-input
  width: 100%
  font-size: 15px
  line-height: 1.3
  background: transparent
  border: none
  outline: none
  padding: 0
  margin-top: 6px
  box-sizing: border-box

  // убираем кнопки автозаполнения с иконками из полей ввода в Сафари
  &::-webkit-contacts-auto-fill-button,
  &::-webkit-credentials-auto-fill-button
    visibility: hidden
    display: none !important // @stylint ignore
    pointer-events: none
    position: absolute
    right: 0

  &:-webkit-autofill

    &, &:hover, &:active
      // среди вычисленных стилей в консоли вебкита видно,
      // что встроенными стилями устанавливается жёлтый фон (webkit, wtf?)
      background-color: transparent !important // @stylint ignore
      // но даже переопределение background-color с меткой !important
      // на данном этапе не помогает, лечится воркэраундом с inset box shadow
      -webkit-box-shadow: inset 0 0 0 1000px #fff

  &::-webkit-input-placeholder
    color: #999
    text-indent: 0

  &::-moz-placeholder
    opacity: 1
    color: #999

  &:-ms-input-placeholder
    color: #999 !important // @stylint ignore

  &:-o-input-placeholder
    color: #999

  &::placeholder
    color: #999

  &__container
    display: inline-block
    height: 36px
    border: 1px solid rgba(#000, .2)
    padding: 1px 12px
    position: relative
    box-sizing: border-box

  &__container&_border-bottom
    height: 32px
    padding: 1px 0
    border-left: none
    border-right: none
    border-top: none

  &__container&_disabled
    background: rgba(#000, .03)
    border-color: rgba(#000, .1)

    .lego-input
      color: #aaa

  &__container&_focused&_border-all
    padding: 0 11px
    border: 2px solid rgba(#fc0, .8)

  &__container&_focused&_border-bottom
    padding-bottom: 0
    border-bottom: 2px solid rgba(#fc0, .8)

  .lego-form-item_invalid &__container,
  .lego-form-item_invalid &__container&_focused,
  &__container&_invalid
    border-bottom: 2px solid rgba(#f00, .8)

  &__container&_border-none,
  &__container&_border-none&_focused,
  .lego-form-item_invalid &__container&_border-none,
  .lego-form-item_invalid &__container&_border-none&_focused,
  &__container&_border-none&_invalid
    border: none
    padding: 1px 12px

  &__container&_invalid&_border-all
    padding: 0 11px
    border: 2px solid rgba(#f00, .8)

  &__container&_full-width
    width: 100%

  &__container&_labeled
    height: 50px
    padding-top: 18px
    margin-bottom: 18px

  &__subcontainer
    position: relative
    display: block

  &__clear
    display: block
    width: 12px
    height: 12px
    flex: 0 0 auto
    background: url('../../../static/i/cross.svg') 50% 50%/16px no-repeat
    margin: 13px 9px
    position: absolute
    right: 0
    top: 0
    cursor: pointer
    opacity: .3

  &:placeholder-shown
    padding: 0

  &:placeholder-shown ~ &__clear
    display: none

  &__placeholder-label
    display: block
    font-size: 13px
    color: #999
    transform: translate(0, -17px)
    transition: transform .5s, font-size .5s
    position: absolute
    left: 0
    top: 0

  &:placeholder-shown ~ &__placeholder-label
    font-size: 15px
    transform: translate(0, 7px)

  &_focused &:placeholder-shown ~ &__placeholder-label
    font-size: 13px
    transform: translate(0, -17px)

  &__tip
    display: none
    border: 1px solid rgba(0, 0, 0, .06)
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .15)
    margin: 0 0 0 7px
    opacity: 0
    transform: translate(5px, 0)
    transition: transform .2s, opacity .2s
    position: absolute
    left: -10000px
    top: -3px
    z-index: 10000

    & > span
      display: block
      min-width: 200px
      max-width: 280px
      font-size: 13px
      color: #999
      background: #fff
      padding: 13px 18px 14px
      box-sizing: border-box
      position: relative

      & > p
        margin: 12px 0

        &:first-child
          margin-top: 0

        &:last-child
          margin-bottom: 0

    &:before
      content: ''
      display: block
      width: 8px
      height: 8px
      background: #fff
      border: 1px solid rgba(0, 0, 0, .06)
      box-shadow: 0 0 8px 0 rgba(0, 0, 0, .15)
      transform: rotate(-45deg)
      position: absolute
      left: -5px
      top: 15px

    &_bottom
      transform: translate(-50%, 5px)
      margin: 7px 0 0

      &:before
        transform: translate(-50%, 0) rotate(-45deg)
        left: 50%
        top: -5px

    &_bottom-left
      transform: translate(-50%, 5px)
      margin: 7px 0 0

      &:before
        transform: rotate(-45deg)
        left: 20px
        top: -5px

  &_labeled &__tip
    top: 13px

  &_focused &__tip
    display: block

  &_focused &__tip,
  &_invalid &__tip
    opacity: 1
    transform: translate(0, 0)
    left: 100%

    &_bottom
      left: 50%
      top: calc(100% + 4px)
      transform: translate(-50%, 0)

    &_bottom-left
      left: 0
      top: calc(100% + 4px)

  .lego-form_processing &__tip
    opacity: 0
    left: -10000px

  &__suffix
    display: block
    font-size: 16px
    line-height: 16px
    padding: 3px 6px 3px 2px
    max-width: 200px
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    color: rgba(#000, .35)
    position: absolute
    right: 0
    top: 0
    z-index: 1

  &_size-m &__suffix
    padding: 10px 11px 12px 2px

  &::-ms-clear
    display: none
