@import '../../stylesheets/defaults'

+host-styles(mp-icon-input)
  color mp-secondary-text-color()
  display inline-block
  text-align left

  *
    box-sizing border-box

+prefix-classes('mp-clickable-input-')
  container-size($border-radius, $font-weight, $horizontal-padding, $line-height, $size-label, $vertical-padding, $font-size=null)
    &.size-{$size-label}
      if $font-size
        font-size $font-size
      else
        font-size-{$size-label}()
      font-weight $font-weight
      line-height ($line-height)px

      input, .label
        border-radius ($border-radius)px
        padding ($vertical-padding)px ($horizontal-padding)px

      .label
        margin-top -($line-height + $vertical-padding + $vertical-padding + 2)px // the +2 is for border width

  .container
    color inherit
    font-family $family-helvetica
    max-width 100%
    text-align inherit

    .label
      border 1px solid transparent
      color inherit
      font-family inherit
      margin-right 1px
      position relative
      text-align inherit
      visibility visible
      white-space pre

      &.empty
        color mp-placeholder-text-color()

      &:not(.disabled)
        cursor pointer

        &:hover
          background-color $grey-50
          color mp-control-primary-color()

          &.empty
            color mp-placeholder-text-color()

    input
      appearance none
      border 1px solid mp-control-primary-color()
      color inherit
      display block
      font-family inherit
      font-size inherit
      font-weight inherit
      line-height inherit
      max-width 100%
      outline 0
      text-align inherit
      visibility hidden
      width 0

      &::placeholder
        color mp-placeholder-text-color()

      &:invalid
        border-color mp-negative-color()

    &.editing
      .label
        visibility hidden

      input
        visibility visible
        width 100%

    container-size(
      $border-radius: 6,
      $font-weight: $weight-bold,
      $horizontal-padding: 10,
      $line-height: 38,
      $size-label: 'title',
      $vertical-padding: 6,
      $font-size: 32px,
    )

    container-size(
      $border-radius: 6,
      $font-weight: $weight-medium,
      $horizontal-padding: 10,
      $line-height: 24,
      $size-label: 'xxl',
      $vertical-padding: 6,
    )

    container-size(
      $border-radius: 5,
      $font-weight: $weight-medium,
      $horizontal-padding: 8,
      $line-height: 22,
      $size-label: 'xl',
      $vertical-padding: 6,
    )

    container-size(
      $border-radius: 5,
      $font-weight: $weight-medium,
      $horizontal-padding: 6,
      $line-height: 20,
      $size-label: 'large',
      $vertical-padding: 4,
    )

    container-size(
      $border-radius: 4,
      $font-weight: $weight-medium,
      $horizontal-padding: 4,
      $line-height: 18,
      $size-label: 'medium',
      $vertical-padding: 4,
    )