@import "../css/colors"
@import "../css/vars"

:local
  .wrapper
    position: relative
    display: flex
    flex-direction: row;
    flex-wrap: wrap
    flex-grow: 1
    flex-basis: 0
    align-self: flex-start

  textarea.input
    resize: none

  .input
    position: relative
    display: block
    font-family: $sansserif
    font-size: 16px
    color: $textGray
    border: none
    width: 100%
    box-sizing: border-box
    padding: 3px 0 3px 10px
    line-height: 32px
    background-color: $white
    border: solid 1px $borderGray
    -webkit-appearance: none
    -moz-appearance: none
    border-radius: 0
    transition: background-color .1s, padding .2s
    flex: 1
    max-width: 100%

    &[type="time"]
      line-height: 30px

    &:focus
      box-shadow: none
      outline: none

    &:disabled
      color: $middleGray

    &::-webkit-input-placeholder,
    &:-moz-placeholder, /* Firefox 18- */
    &::-moz-placeholder, /* Firefox 19+ */
    &:-ms-input-placeholder
      color: $borderGray
      font-weight: 200

  .wrapper.preliminary > .input
    color: $borderGray;

  .wrapper.error > .input
    border: solid 1px $red

  .wrapper.readonly > .input
    border-color: $lightGray

  .wrapper.readonly:not(.fake) > .input
    cursor: pointer

    &:hover
      border-color: $borderGray

  .wrapper.readonly.enforceReadonly:not(.fake) > .input
    cursor:text;

    &:hover
      text-decoration: none;

  // label offset in card
  .wrapper.labelOffset > .hook
    left: -4px

  .wrapper.labelOffset > .input
    transition: background-color .1s
    // Ensure the text doesn't jump when the field appears
    // And that the field aligns nicely to the right.
    padding-right: 4px

  .wrapper.readonly.labelOffset > .input
    margin-left: 0

  .hook
    content: ""
    z-index: 2
    position: absolute
    left: 0
    bottom: 0
    height: 8px
    width: 1px
    background: $middleGray

  .input:focus~.hook
    background: $blue

  .input:disabled~.hook
    background: $lightGray

  .wrapper.readonly > .hook
    display: none

  .wrapper.error > .hook
    background: $red

  label
    flex: 1 100%

  .groupedWrapper
    margin-left: 10px