// Standard Forms
//-----------------------------------------

form
  margin: 0 0 18px
  label 
    display: block
    +font-size(13)
    line-height: 18px
    cursor: pointer
    margin-bottom: 9px
    
input.input-text, textarea
  border-right: 1px solid #bbb
  border-bottom: 1px solid #bbb
input.input-text, textarea, select
  display: block 
  margin-bottom: 9px
label + input.input-text, label + textarea, label + select, label + div.dropdown, select + div.dropdown
  margin-top: -9px
  
// Text input and textarea font and padding
//-----------------------------------------

input.input-text, textarea
  +font-size(13)
  padding: 4px 3px 2px
  background: #fff
  &.oversize
    +font-size(18, $is-important: true)
    padding: 4px 5px !important
  &:focus
    outline: none !important
    background: #f9f9f9
  
// Text input and textarea, disabled
input.input-text[disabled], textarea[disabled]
  background-color: #ddd
  
// Inlined Label Style
//-----------------------------------------

input, textarea
  .placeholder
    color: #888

// Text input and textarea sizes
//-----------------------------------------

input
  &.input-text
    width: 254px
textarea
  width: 254px
input, textarea
  &.small
    width: 134px
  &.medium
    width: 254px
  &.large
    width: 434px

// Fieldsets
//-----------------------------------------

form
  fieldset
    padding: 9px 9px 2px 9px
    border: solid 1px #ddd
    margin: 18px 0

// Inlined Radio & Checkbox
//-----------------------------------------

.form-field input[type=radio], .form-field input[type=checkbox]
  display: inline
  width: auto
  margin-bottom: 0

// Errors
//-----------------------------------------

.form-field.error input, input.input-text.red
  border-color: #c00000 
  background-color: rgba(255,0,0,0.15)
.form-field.error label, label.red
  color: #c00000
.form-field.error small, small.error
  margin-top: -6px
  display: block
  margin-bottom: 9px
  +font-size(11)
  color: red
  width: 260px
.small+.error
  width: 140px
.medium+.error
  width: 260px
.large+.error
  width: 440px

// Nicer Forms
//-----------------------------------------

form.nice
  input.input-text, textarea
    border: solid 1px #bbb
    +border-radius(2px)
    +font-size(13)
    padding: 6px 3px 4px
    outline: none !important
    background: image-url('misc/input-bg.png') #fff
    &:focus
      background-color: #f9f9f9
    fieldset
      +border-radius(3px)
    .form-field input[disabled], input.input-text[disabled], textarea[disabled]
      background: #ddd
  small.error
    padding: 6px 4px
    border: solid 0 #c00000
    border-width: 0 1px 1px 1px
    margin-top: -10px
    background: #c00000
    color: #fff
    +font-size(12)
    font-weight: bold
    +border-bottom-left-radius(2px)
    +border-bottom-right-radius(2px)
  .small+.error
    width: 132px
  .medium+.error
    width: 252px
  .large+.error
    width: 432px
    
// Custom Forms
//-------------------------------------------------

form.custom
  span.custom
    display: inline-block
    width: 14px
    height: 14px
    position: relative
    top: 2px
    border: solid 1px #ccc
    background: image-url('misc/custom-form-sprites.png') 0 0 no-repeat
    &.radio
      +border-radius(7px)
      &.checked
        background-position: 0 -14px
    &.checkbox
      &.checked
        background-position: 0 -28px
  div.custom
    &.dropdown
      position: relative
      display: inline-block
      width: auto
      height: 28px
      margin-bottom: 9px
      a.current
        display: block
        width: auto
        line-height: 26px
        padding: 0 38px 0 6px
        border: solid 1px #ddd
        color: #141414
      a.selector
        position: absolute
        width: 26px
        height: 26px
        display: block
        background: image-url('misc/custom-form-sprites.png') -14px 0 no-repeat
        right: 0
        top: 0
        border: solid 1px #ddd
      ul
        position: absolute
        width: auto
        display: none
        margin: 0
        left: 0
        top: 27px
        margin: 0
        padding: 0
        background: rgba(255,255,255,0.9)
        border: solid 1px #ddd
        z-index: 10
        &.show
          display: block
        li
          cursor: pointer
          padding: 3px 38px 3px 6px
          margin: 0
          white-space: nowrap
          &.selected
            background: image-url('misc/custom-form-sprites.png') right -52px no-repeat
            &:hover
              background: image-url('misc/custom-form-sprites.png') $blue right -78px no-repeat
          &:hover
            background-color: $blue
            color: #fff
      &:hover
        a.selector
          background-position: -14px -26px
      &.open
        ul
          display: block
        a.selector
          background-position: -14px -26px
  .custom.disabled
    background-color: #ddd
  // Nicer Customer Forms
  &.nice
    span.custom.checkbox
      +border-radius(2px)
    div.custom.dropdown
      a.current
        +border-radius(2px)
        background-image: image-url('misc/input-bg-outset.png')
        background-position: bottom right
      a.selector
        height: 27px
        border-width: 0 0 0 1px
      ul
        +border-bottom-left-radius(2px)
        +border-bottom-right-radius(2px)