/*

  FORMS
  --------

  Base styles for various input types, form layouts and states

*/

$label_width: 20%;
$input_width: 80%;

form {
  margin: 0 0 1em 0;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

fieldset.inputs > legend {
  color: gray(200);
  display: block;
  font-size: 1.5em;
  font-style: italic;
  margin: 0 0 1em 0;
}

fieldset.inputs.next {
  & > legend { float: left; width: $label_width; }
  & > ol { float: right; width: $input_width; }
}

select {
  @include appearance(none);
}

input,
button,
select,
textarea {
  font-family: $font_family;
  font-size: 1em;
  font-weight: normal;
  line-height: 1em;
}

label {
  display: inline-block;
  font-size: 1em;
  font-weight: bold;
  color: gray(110);
  padding: 1em 0;
}

input,
textarea,
select {
  @include border-radius(5px);
  @include box-sizing("border-box");
  background-color: $white;
  border: 1px solid gray(200);
  color: gray(150);
  display: inline-block;
  line-height: 1em;
  margin: 0;
  max-width: 100%;
  padding: 0.8em;
}

// textarea, only vertically resizable
textarea {
  color: #000;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.2em;
  resize: vertical;
}

// inputs within a label
label input,
label textarea,
label select {
  display: inline-block;
}

// focus state
input:focus,
textarea:focus,
select:focus {
  @include box-shadow(transparentize($yellow, .2) 0 0 5px);
  border-color: $yellow;
  color: $black;
  outline: none;
}



/*

  FORMS / FORMTASTIC
  ---------------------

*/

// groups
.inputs,
.actions {
  @extend .inner;

  ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    @include pie-clearfix;
    margin: 0 0 1em 0;
  }
}

// input line
.input {
  position: relative;

  .label {
    float: left;
    width: $label_width;
  }

  input,
  textarea,
  select {
    width: $input_width;
  }

  label input,
  label textarea,
  label select {
    width: auto;
  }

  .inline-hints {
    color: gray(180);
    font-style: italic;
    margin: 0.5em 1em 0.5em $label_width;
  }

  .inline-errors {
    @include border-radius(4px);
    @include border-bottom-left-radius(0);
    @include border-bottom-right-radius(0);
    background-color: $red;
    color: white;
    font-size: 11px;
    height: 22px;
    line-height: 2em;
    margin: 0;
    padding: 0 10px;
    position: absolute;
    right: 0;
    top: -22px;
  }

  &.boolean {
    padding-left: $label_width;

    label { font-weight: normal; }
    input[type="checkbox"] { margin-right: 11px; }
  }

  &.select {
    white-space: nowrap;
  }
}

// errors
.input.error {
  .label {
    color: $red;
    font-style: italic;
  }

  input,
  select,
  textarea {
    @include border-top-right-radius(0);
    border-color: $red;
    color: $red;

    &:focus {
      @include box-shadow(transparentize($red,.2) 0 0 5px);
    }
  }
}

// fragments
.fragments .fragments-group {
  clear: both;
}

// single file
.input.single_file .file-description {
  font-size: 12px;
  margin-left: $label_width;
  margin-top: 7px;
  width: $input_width;

  img {
    display: inline-block;
  }

  span {
    display: inline-block;
    font-size: 13px;
    margin-left: 8px;
    vertical-align: top;
  }
}



/*

  FORMS / CHOSEN
  -----------------

*/

.chzn-container {
  margin-top: 4px;
}