@import variables
@import mixins

form
  margin-bottom: 20px

label
  cursor: pointer
  display: block
  margin-top: 10px

input
  &[type="number"], &[type="date"], &[type="email"], &[type="password"], &[type="text"]:not(.input-addon-field)
    color: color('light')
    border: 1px solid #ccc
    width: 300px
    max-width: 95%
    font-size: size('normal')
    height: 25px
    padding-bottom: 0
    font-family: sans-serif
    margin-top: 10px
    +appearance
    @include placeholder
      color: color('lighter')
  &[type="number"]:focus, &[type="date"]:focus, &[type="email"]:focus, &[type="password"]:focus, &[type="text"]:focus
    color: color('dark')
    border-color: rgba(82, 168, 236, 0.8)
    outline: 0
    box-shadow: 0 0 8px rgba(82, 168, 236, 0.6)

input[type="number"]
  width: 70px

input[type="text"]:not(.input-addon-field)
  &.form-numeric
    width: 70px
  &.form-datetime, &.form-date
    width: 150px
  &.form-input-large
    width: 400px
  &.form-input-small
    width: 150px

textarea:focus
  color: color('dark')
  border-color: rgba(82, 168, 236, 0.8)
  outline: 0
  box-shadow: 0 0 8px rgba(82, 168, 236, 0.6)

textarea
  border: 1px solid #ccc
  width: 400px
  max-width: 99%
  height: 200px
  font-family: sans-serif

select
  max-width: 95%
  &:focus
    outline: 0

.tag-autocomplete
  width: 400px

span.select2-container
  margin-top: 2px

.form-actions
  padding-top: 20px
  clear: both

.form-required
  color: red
  padding-left: 5px
  font-weight: bold

  @include xs-device
    display: none

input.form-error, textarea.form-error
  border: 2px solid #b94a48

input.form-error:focus, textarea.form-error:focus
  box-shadow: none
  border: 2px solid #b94a48

.form-errors
  color: color('error')
  list-style-type: none

ul.form-errors li
  margin-left: 0

.form-help
  font-size: size('small')
  color: brown
  margin-bottom: 15px

.form-inline
  padding: 0
  margin: 0
  border: none
  label
    display: inline
  input, select
    margin: 0 15px 0 0
  .form-required
    display: none

.form-inline-group
  display: inline

.form-columns
  +display-flex
  +flex-direction(row)
  +flex-wrap
  +justify-content(flex-start)

  .form-column
    margin-right: 25px
    flex-grow: 1

.form-login
  max-width: 350px
  margin: 8% auto 0
  li
    margin-left: 25px
    line-height: 25px
  h2
    margin-bottom: 30px
    font-weight: bold

.reset-password
  margin-top: 20px
  a
    color: color('light')