@import "base/variables"
@import "compass/typography/vertical_rhythm"
@import 'base/text'
@import 'base/fonts'
@import 'base/blocks'

@function font-spaces($size)
  @return $size * $base-font-size
  
=label
  +noselect
  +ellipsis_text
  &[title]
    cursor: help
  span.input_default
    +subtle_text
    display: block

=boolean
  position: absolute 
  overflow: hidden 
  clip: rect(0 0 0 0)
  z-index: -1000 
  left: -1000px 
  height: 1px
  width: 1px
  margin: -1px
  padding: 0
  border: 0
  display: none
  float: right
            
  & + label:after
    content: "false"
    display: block
    clear: both
    margin-left: 1em

  &:checked + label:after
    +bold
    content: "true"

form
  +container
  .input
    +rhythm(0.5,0.5,0.5,0.5)

    textarea
      +rhythm(0,0.25,0.25,0,$base-font-size)
      padding-left: font-spaces(1)
      padding-right: font-spaces(1)
      min-height: rhythm(7)

    span.file_or_text_area
      display: block
    label
      +label
        
select
  min-width: font-spaces(10)
  &:empty
    display: none

input[type=text], input[type=number], input[type=file], input[type=submit], select, input[type=file], select
  height: font-spaces(2)
  width: 12em

input[type=text], input[type=number], select
  display: inline-block
  padding-left: font-spaces(0.5)
    
span.choice
  input 
    float: left

.input.boolean
  label, input
    +pointer

.input.multiple
  +padded_block
  width: 100% !important
  span.choice
    float: left
    min-width: span(1 of 10)
    margin-right: font-spaces(1)
  span, label
    +pointer

=labeled_entry
  +clearfix
  max-width: 100%
  @media #{$only-large}
    position: relative
    width: font-spaces(35)
    & > label
      text-align: right

    & > :first-child
      float: left
      width: 30% !important
      min-width: 30% !important
      span
        display: block
    & > :nth-child(2)
      float: left
      margin-left: $gutter

  @media #{$not-large}
    width: 100%

    & > :first-child
      float: left

    & > :not(:first-child)
      float: right

.input
  margin-top: 0px !important
  margin-bottom: 0px !important

.input:not(.multiple)
  +oneline
  +padded_block
  +labeled_entry
  float: left
  font-size: 0
  *
    font-size: initial

  input[type=checkbox]
    margin-top: font-spaces(0.5)
    margin-bottom: font-spaces(0.5)

  @media #{$only-large}
    span.file_or_text_area
      display: block
      margin-left: calc(30% + #{$gutter})
      float: right
      +subtle_text

      &:before
        content: "\02026"
        width: font-spaces(1.25)
        margin-right: font-spaces(0.25)
        display: inline-block

    textarea, select
      max-width: calc(70% - #{$gutter})

    textarea
      width: calc(70% - #{$gutter})
      margin-left: calc(30% + #{$gutter})
      margin-right: 0em
      clear: both
      float: left

  @media #{$not-large}
    span.file_or_text_area
      +subtle_text
      clear: both
      float: right
      &:before
        content: "\02026"
        width: font-spaces(1.25)
        margin-right: font-spaces(0.25)
        display: inline-block

    textarea, select
      max-width: 100%
    textarea
      clear: both
      width: 100%

.input.submit:last-child
  clear: both !important
  float: left
  min-height: 0
  border-top: 1px solid $subtle_color
  > select
    width: font-spaces(5)
    min-width: font-spaces(5)

form.workflow_task
  position: relative
  &:before
    +oneline
    content: "Hover over the input labels to see the description"
    position: absolute
    left: 0
    top: -$tile
    font-size: 0.6em
    color: $subtle_color
    @media #{$only-large}
      padding-left: 23 * $tile