@import mixins
@import flex

.wmch-form
  position: relative
  margin-top: 30px
  max-width: 400px
  color: #000
  padding: 20px
  &,*
    outline: none
    &,&:before,&:after
      box-sizing: border-box
  &.wmch-loading
    &:before
      content: ""
      display: block
      position: absolute
      z-index: 1
      top: 0
      bottom: 0
      right: 0
      left: 0
    .wmch-form-submit
      padding-left: 15px
      background: #7d7d7d
      &:before
        content: ""
        display: block
        border: 1px solid #909090
        border-left: 1px solid #ffffff
        border-radius: 50%
        width: 16px
        height: 16px
        margin-right: 10px
        position: relative
        top: 2px
        +transform(translateZ(0)) 
        +animation(wmch-spiner-animation 1.1s infinite linear)
    .wmch-form-field input:not([type="submit"]):not([type="checkbox"]):not([type="file"])
      background-color: #f5f5f5
  .wmch-result
    padding: 10px
    border: 1px solid #00adff
    color: #00adff
    margin-bottom: 30px
    display: none
    &.wmch-show
      display: block
    &.wmch-error
      border: 1px solid #ff8c6a
      color: #e00303
  .wmch-form-field
    position: relative
    margin-bottom: 20px
    &.wmch-has-rtl input:not([type="submit"]):not([type="checkbox"]):not([type="file"])
      direction: rtl
      text-align: right
    input:not([type="submit"]):not([type="checkbox"]):not([type="file"])
      width: 100%
      height: 47px
      box-shadow: none
      font-size: 16px
      border: 1px solid #E5E5E5
      padding: 0 15px
      outline: none
      direction: ltr
      text-align: left
      +transition(0.3s)
      &:focus
        border-color: #20ABF5
  .wmch-allow-smiles input:not([type="submit"]):not([type="checkbox"]):not([type="file"])
    padding-right: 50px
  .wmch-checkbox
    margin-bottom: 6px
    cursor: pointer
    position: relative
    text-align: right
    display: inline-block
    padding-left: 25px
    &:hover:before
      border-color: #20ABF5
    &.checked:after
      visibility: visible
      +opacity(1,100)
    &,&:before,&:after
      +transition(0.3s)
    &:before,&:after
      content: ""
      display: block
      position: absolute
      top: 1px
      left: 0
    &:before
      width: 16px
      height: 16px
      background-color: #fff
      border: 1px solid #E5E5E5
      +border-radius(2px)
    &:after
      width: 8px
      height: 8px
      margin: 4px 0 0 4px
      background-color: #20ABF5
      visibility: hidden
      +opacity(0,0)
    input[type="checkbox"]
      display: none
    .wmch-form-label
      font-size: 14px
  .wmch-form-label
    position: relative
    font-size: 16px
    margin-bottom: 10px
    padding-right: 25px
    display: inline-block
  .wmch-form-submit
    cursor: pointer
    width: 100%
    height: 56px
    padding: 0 20px 3px
    border: none
    background: #0caaf7
    color: #fff
    font-weight: 600
    font-size: 16px
    +box-shadow(none)
    +transition-custom(background-color 0.3s linear)
    +flex-center
    &:hover
      background: darken(#0caaf7, 10%)
  .wmch-form-pic
    +flex
    +flex-justify-content(start,flex-start)
    +flex-align-items(center)
    &.selected .wmch-form-pic-rem
      display: block
    img
      max-width: 43px
      margin-right: 35px
    input,.sfi-wrapper
      display: none
  .wmch-form-pic-img
    line-height: 0
    font-size: 0
    margin-bottom: 1px
  .wmch-form-pic-bt
    width: 145px
    height: 44px
    background: transparent
    margin-right: 15px
    color: #313131
    font-weight: 600
    border: 1px solid #a1a3a5
    +border-radius(2px)
    +flex-center
    +transition(0.3s)
    &:hover
      border-color: #20ABF5
    &:after
      content: ""
      display: block
      width: 16px
      height: 19px
      margin-left: 15px
      background: url(../img/form-pic-bt.png) center no-repeat
      +background-size(contain)
  .wmch-form-pic-sel
    font-size: 14px
    color: #646464
  .wmch-form-pic-rem
    position: relative
    cursor: pointer
    margin-left: 15px
    width: 15px
    height: 15px
    display: none
    &:before,&:after
      content: ""
      display: block
      position: absolute
      width: 1px
      height: 12px
      top: 1px
      left: 7px
      background-color: #000
    &:before
      +rotate(-45deg)
    &:after
      +rotate(45deg)
  .wmch-show-smiles
    cursor: pointer
    position: absolute
    bottom: 16px
    right: 20px
    width: 14px
    height: 14px
    background: url(../img/smile.png) center no-repeat
    +background-size(contain)
    +border-radius(3px)
    +transition(0.3s)
    &:not(:hover)
      +opacity(0.85,85)
  .wmch-smile-popup
    position: fixed
    background-color: #fff
    max-width: 350px
    padding: 15px 10px 5px
    margin: -16px 0 0 60px
    font-size: 18px
    +flex
    +flex-justify-content(start,flex-start)
    +flex-align-items(flex-start)
    +flex-wrap(wrap)
    +border-radius(3px)
    &,.smile
      +transition(0.1s)
    &:not(.show)
      visibility: hidden
      +translate-x(10px)
      +opacity(0,0)
    .smile
      cursor: pointer
      display: inline-block
      margin: 0 0 10px 5px
      &:hover
        +translate-y(-2px)
  .wmch-form-tooltip
    cursor: auto
    &:not(:hover) .wmch-form-tooltip-c
      visibility: hidden
      +translate-y(-10px)
      +opacity(0,0)
    &:hover .wmch-form-tooltip-q
      background-color: #20ABF5
      border-color: #20ABF5
      color: #fff
  .wmch-form-tooltip-c,.wmch-form-tooltip-q
    +transition(0.1s)
  .wmch-form-tooltip-c
    position: absolute
    z-index: 1
    top: 14px
    left: 430px
    margin: 15px 0 0 0
    background-color: #fff
    width: 400px
    padding: 20px
    text-align: center
    +border-radius(4px)
    &:before
      content: ""
      display: block
      position: absolute
      top: 15px
      right: 100%
      border: 10px solid transparent
      border-right: 10px solid #fff
    p
      &:first-child
        margin-top: 0
      &:last-child
        margin-bottom: 0
    img
      max-width: 100%
  .wmch-form-tooltip-q
    cursor: pointer
    position: absolute
    top: 2px
    right: 0
    width: 16px
    height: 16px
    text-align: center
    border: 1px solid #ccc
    color: #ccc
    font-weight: 600
    font-size: 11px
    line-height: 14px
    +border-radius(50%)
    &:before
      content: ""
      display: block
      position: absolute
      top: -5px
      bottom: -5px
      right: -5px
      left: -5px

@keyframes wmch-spiner-animation
  0%
    +rotate(0deg)
  100%
    +rotate(360deg)

html[lang="he-IL"]
  .wmch-form
    .wmch-show-smiles
      right: auto
      left: 20px
    .wmch-smile-popup
      margin-left: -390px
    .wmch-allow-smiles input:not([type="submit"]):not([type="checkbox"]):not([type="file"])
      padding-right: 15px
      padding-left: 50px
    .wmch-form-label
      padding-right: 0
      padding-left: 25px
    .wmch-form-tooltip-q
      top: 1px
      right: auto
      left: 0
    .wmch-form-tooltip-c
      left: 0
      right: 430px
      &:before
        right: auto
        left: 100%
        border-right-color: transparent
        border-left-color: #fff
    .wmch-checkbox
      padding-left: 0
      padding-right: 25px
      &,&:before,&:after
        +transition(0.3s)
      &:before,&:after
        left: auto
        right: 0
      &:after
        margin-left: 0
        margin-right: 4px
    .wmch-form-pic img
      margin-right: 0
      margin-left: 30px
    .wmch-form-pic-bt
      margin-right: 0
      margin-left: 15px
    .wmch-form-pic-bt:after,.wmch-form-pic-rem
      margin-left: 0
      margin-right: 15px
    .wmch-form-submit:before
      margin-right: 0
      margin-left: 10px