//
// Form
// --------------------------------------------------

//== Form mixins
//
//## Form mixins is there because is doesnt have to be share

=outline-input-form
  padding: 6px 0px
  -webkit-appearance: none
  +box-shadow(none)
  +border-radius(0)
  border: none
  border-bottom: 1px solid $input-border
  +default-transition
  &:focus, &.focus
    +box-shadow(0px 1px 0px $input-border-focus)
    border-color: $input-border-focus
    +default-transition

//== Legends
//
//##

legend
  font-weight: 600
  padding: 0
  margin-top: 15px
  margin-bottom: 15px
  border: none

//** Remove margin top form first legend because of page-content-wrap padding-top
.page-content-wrap .form-inputs
  +first-child
    legend
      margin-top: 0

//== Labels
//
//##

.control-label
  color: $gray
  font-weight: 700
  font-size: 0.85em
  margin-bottom: 8px
  text-transform: uppercase
  +transition(color ease-in-out 0.15s)

.form-group.focused
  .control-label
    color: $brand-primary
    +transition(color ease-in-out 0.15s)

//== Inputs
//
//##

.form-inputs,
.nested-one-field,
.tab-pane
  +clearfix
  .form-group:last-of-type,
  .form-group:only-child,
  .nested-one-field:last-of-type  
    margin-bottom: 0

.nested-one-field
  margin-bottom: $form-group-margin-bottom

.form-control
  font-size: 14px


//== Inputs outline
//
//## Styled inputs with juste a border bottom

.forms-outline
  .form-control
    +outline-input-form
    &[disabled], &[readonly]
      color: $gray
      padding-right: 6px
      padding-left: 6px
    &[disabled]:focus, &[readonly]:focus
      background: $input-bg-disabled
      color: $gray
      border-color: $gray-lighter

  .input-group-addon
    background-color: transparent
    border-color: transparent

  //** Remove margin because input have just bottom border
  .control-label
    &.country,
    &.date,
    &.datetime,
    &.email,
    &.integer,
    &.select,
    &.selectize,
    &.string,
    &.tel,
    &.text,
    &.time,
    &.url
      margin-bottom: 0

  //** Textarea
  .form-control.text
    resize: vertical

  //** Redactor
  .redactor-editor
    +outline-input-form
    strong, b
      font-weight: 700

  .redactor-toolbar
    border: none
    background-color: $gray-lighter
    +border-radius(0)

  //** Selectize
  .selectize-input,
  .selectize-input.full
    +outline-input-form

  .selectize-control.multi .selectize-input.has-items
    +outline-input-form
    padding: 3px 0px

  //** Spinner
  .spinbox
    .btn.btn-default
      color: $gray
      background-color: transparent
      border-color: transparent
      &.spinbox-up
        padding: 0px 9px 4px 9px
      &.spinbox-down
        padding: 6px 9px 0px 9px
        margin-top: 0
      &:hover,
      &:focus
        color: $gray-darker
      &:active,
      &.active,
      &:active:focus
        +box-shadow(none)

  // Datepicker
  .datetimepicker-trigger.btn-default
    color: $gray
    background-color: transparent
    border-color: transparent
    &:hover,
    &:focus
      color: $gray-darker
    &:active,
    &.active,
    &:active:focus
      +box-shadow(none)

//== Search form filter
//
//##

.filter-form
  +filter-style
  .form-control
    &:focus
      +box-shadow(none)
  .form-control,
  .input-group-btn
    background-color: transparent
    border: none
    +border-left-radius(20px)
  .input-group-btn
    overflow: hidden
    +border-left-radius(0)
    +border-right-radius(20px)
  .btn
    background-color: transparent
    color: $gray
    &:hover
      color: $gray-dark

//== Fixed actions
//
//##

.form-fixed-actions
  margin-bottom: 100px
  .form-actions
    +border-radius(2px)
    position: fixed
    bottom: 0px
    right: 50px
    left: auto
    padding: 8px
    z-index: $zindex-navbar-fixed - 10
    background-color: $gray-lighter
    +material-box-shadow-soft(3)
    margin-bottom: 25px
    text-align: center
    .btn
      margin-bottom: 10px
      margin-right: 0px
      &:last-child
        margin-right: 0
        margin-bottom: 0

//== Input group addons
//
//##

.input-group-btn:first-child >
  .btn, .btn-group
    margin-right: -2px

.input-group-lg >
  .form-control, .input-group-addon, .input-group-btn > .btn
    font-size: 16px

.input-group-sm >
  .form-control, .input-group-addon, .input-group-btn > .btn
    font-size: 11px

.input-group-btn > .btn
  &:active, &:focus, &:hover
    z-index: 0

//== Tabs error
//
//##

.nav-tabs
  a
    &.has-error
      color: $brand-danger
  > li.active
    > a,
    > a:hover,
    > a:focus
      &.has-error
        color: $brand-danger
        border-bottom-color: $brand-danger


//== Input with error
//
//##

.has-success
  .checkbox, .checkbox-inline, .control-label, .form-control-feedback, .help-block, .radio, .radio-inline
    color: $brand-success
  .form-control
    border-color: $brand-success

.has-warning
  .checkbox, .checkbox-inline, .control-label, .form-control-feedback, .help-block, .radio, .radio-inline
    color: $brand-warning
  .form-control
    border-color: $brand-warning

.has-error
  .checkbox, .checkbox-inline, .control-label, .form-control-feedback, .help-block, .radio, .radio-inline
    color: $brand-danger

.bootstrap-select.error > button, .form-control.error, .has-error .form-control
  border-color: $brand-danger

.bootstrap-select.valid > button, .form-control.valid
  border-color: $brand-success