@import "../constants.styl"

[data-component-input]
  position                            : relative
  margin-bottom                       : SPACE
  input, textarea, label
    font-size                         : FONT_SIZE_NORMAL
    font-weight                       : FONT_WEIGHT_NORMAL

  // -- Style
  RADIUS = (SPACE / 8)
  &.touch
    // -- Children
    input
      pointer-events                  : all
      z-index                         : 2
      position                        : absolute
      left                            : 0
      width                           : 100%
      height                          : 100%
      opacity                         : 0
    .bar, label
      position                        : relative
      display                         : inline-block
      vertical-align                  : middle
    .bar
      width                           : SPACE
      height                          : SPACE
      margin-right                    : (SPACE / 1.32)
      border-radius                   : RADIUS
      box-shadow                      : inset 0 0 0 RADIUS TEXT
      transition-property               background-color, box-shadow
      transition-duration               ANIMATION_DURATION
      transition-timing-function        ANIMATION_EASE
      &:before
        z-index                       : -1
        position                      : absolute
        left                          : -(SPACE)
        top                           : -(SPACE)
        display                       : block
        content                       : ""
        width                         : SIZE = (3 * SPACE)
        height                        : SIZE
        border-radius                 : 50%
        opacity                       : 0
      &:after
        display                       : block
        width                         : SPACE
        color                         : WHITE
        text-align                    : center
        transform                       scale(0)
        transition                      transform ANIMATION_DURATION ANIMATION_DELAY ANIMATION_EASE
    label
      font-size                       : FONT_SIZE_SMALL
      color                           : TEXT
    // -- Style
    &:not(.radio) .bar:after
      content                         : "✓"
    &.radio .bar
      border-radius                   : 50%
    &.disabled .bar
      box-shadow                        inset 0 0 0 RADIUS DIVIDER
    &.checked
      &.radio .bar
        box-shadow                      : inset 0 0 0 RADIUS ACCENT, inset 0 0 0 (RADIUS * 2.5) WHITE
      &:not(.radio) .bar
        box-shadow                      : none
      .bar
        background-color                : ACCENT
        &:before
          background-color              : alpha(ACCENT, .5)
          animation-name                  ripple-touch
          animation-iteration-count       1
          animation-timing-function       ANIMATION_EASE
          animation-duration              (2 * ANIMATION_DURATION)
        &:after
          transform                       scale(1)

  &:not(.touch)
    // -- Stylesheets
    &.focus
      input, textarea
        outline                       : none
        ~ .bar:before, ~ .bar:after
          width                       : 50%
        &:invalid
          &  ~ label
            color                     : CANCEL
          & ~ .bar:before, & ~ .bar:after
            background-color          : CANCEL
    &.focus , &.valid
      input, textarea
        & ~ label
          top                         : -(SPACE / 2)
          font-size                   : FONT_SIZE_TINY
          color                       : PRIMARY
    input[type="date"]
      & ~ label
          top                         : -(SPACE / 2)
          font-size                   : FONT_SIZE_TINY
          color                       : PRIMARY
    &:not(.focus)
      input, textarea
          &:invalid:not(:required)
            border-bottom-color       : CANCEL
    &.error
      input, textarea
        border-bottom-color           : CANCEL

    // -- Children
    input, textarea
      display                         : block
      padding                         : (SPACE / 2) 0
      width                           : 100%
      color                           : TEXT
      background-color                : transparent
      border                          : none
      border-bottom                   : 1px solid DIVIDER
      // -- Attributes
      &:disabled
        color                         : TEXT_SECONDARY
        border-bottom-style           : dotted

    label
      position                        : absolute
      left                            : 0
      top                             : (SPACE / 2)
      color                           : TEXT_SECONDARY
      transition-property               top, font-size, color
      transition-duration               ANIMATION_DURATION
      transition-timing-function        ANIMATION_EASE

    .bar
      position                        : relative
      display                         : block
      width                           : 100%
      &:before, &:after
        content                       : ''
        position                      : absolute
        height                        : 2px
        width                         : 0
        bottom                        : 0
        background-color              : PRIMARY
        transition-property             width, background-color
        transition-duration             ANIMATION_DURATION
        transition-timing-function      ANIMATION_EASE
      &:before
        left                          : 50%
      &:after
        right                         : 50%

  &.hidden
    display                           : none

  // -- Children
  label
    pointer-events                    : none
  .error
    position                          : absolute
    right                             : (SPACE / 4)
    bottom                            : -(SPACE / 1.25)
    font-size                         : (FONT_SIZE_TINY * 0.9)
    color                             : CANCEL

@keyframes ripple-touch
  0%
    transform                           scale(0)
    opacity                           : 1
  100%
    transform                           scale(1)
    opacity                           : 0