// -------------------------------------- Active Admin Forms
form {
  /* Reset margins & Padding */
  ul, ol, li, fieldset, legend, input, textarea, select, p { margin:0; padding:0; }
  ol, ul { list-style: none }

  fieldset { 
    border: 0; 
    padding: 10px 0;
    margin-bottom: 20px;

    &.inputs { @include section-background; }

    legend {
      width: 100%;
      span { display: block; @include section-header; }
    }

    ol > li {
      padding: 10px;
      label {
        display: block;
        width: 20%;
        float: left;
        font-size: 1.0em;
        font-weight: bold;
        color: $section-header-text-color;
        abbr { border: none; color: #aaa; }
      }
    }

    ol > div.has_many {
      padding: 20px 10px;
      h3 {
        font-size: 12px;
        font-weight: bold;
      }
    }

    ol > li > li label { 
      line-height:100%; 
      padding-top:0; 
      input { 
        line-height:100%; 
        vertical-align:middle; 
        margin-top:-0.1em;
      }
    }
  }

  /* Nested Fieldsets and Legends */
  fieldset > ol > li {
    fieldset { 
      position:relative; 
      padding: 0;
      margin-bottom: 0;

      legend { 
        position:absolute; 
        width:95%; 
        padding-top:0.1em; 
        left: 0px; 
        font-size: 100%; 
        font-weight: normal;
        span { position:absolute; }
        &.label label { position:absolute; }
      }

      ol { 
        float:left; 
        width:74%; 
        margin:0; 
        padding:0 0 0 20%; 

        li {
          padding:0; 
          border:0;
        }
      }
    }
  }

  /* Text Fields */
  input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=tel], textarea {
    width: 76%;
    border: 1px solid #c9d0d6;
    @include rounded;
    font-size: 0.95em;
    @include sans-family;
    outline: none;
    padding: 8px $text-input-horizontal-padding 7px;
    
    &:focus {
      border: 1px solid #99a2aa;
      @include shadow(0,0,4px,#99a2aa);
    }
  }
  /* Buttons for WYSIWYGs */
  .input-push {
    width: 76%;
    margin-left: 20%;
  }

  .input-buttons {
    @extend .input-push;
    background-color: #fff;
    padding: 0 10px;
    border: 1px solid #c9d0d6;
    border-bottom: none;
    @include rounded-all(3px,3px,0,0);
    opacity: 0.6;

    &:hover, &:focus{
      opacity: 1;
    }
  }
  .wmd-button {
    box-sizing: border-box;
  }

  fieldset > ol > li {

    /* Hints */
    p.inline-hints { 
      font-size: 0.95em;
      font-style: italic;
      color:#666; 
      margin: 0.5em 0 0 20%;  
    }

    /* Date and Time Fields */
    &.date, &.time, &.datetime {
      fieldset ol li {
        float:left; width:auto; margin:0 0.5em 0 0; 
        label { display: none; }
        input { display:inline; margin:0; padding:0;  }
      }
    }

    /* Check Boxes or Radio fields */
    &.check_boxes, &.radio {
      fieldset ol { 
        margin-bottom:-0.6em;
        li { 
          margin:0.1em 0 0.5em 0; 
          label { 
            float:none; 
            width:100%; 
            input { margin-right:0.2em; }
          }
        }
      }
    }

    /* Boolean Field */
    &.boolean {
      height: 1.1em;
      label { 
        width: 80%;
        padding-left:20%; 
        padding-right: 10px; 
        text-transform: none !important;
        font-weight: normal;
        input { margin:0 0.5em 0 0.2em; }
      }
    }

    /* Errors */
    p.inline-errors { 
      text-transform:capitalize;
      color: $error-color;
      font-weight: bold;
      margin:0.3em 0 0 20%; 
    }
    ul.errors { 
      color: $error-color;
      margin:0.5em 0 0 20%; 
      list-style:square; 
      li { padding:0; border:none; display:list-item; }
    }

    &.error {
      input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], textarea {
        border: 1px solid $error-color;
      }
    }
  }

  /* Buttons */
  
  input[type=submit] {
    @include dark-button;
    cursor: pointer;
    
  }
  
  .buttons, .actions {
    margin-top: 15px; 
    input[type=submit] { margin-right: 10px; }
  }
  
  fieldset.buttons li, fieldset.actions li {
    float:left; 
    padding: 0;

    &.cancel {
      a {
        @include light-button; @include icon(#777, 9px);
      }
    }
  }

}

// -------------------------------------- Sidebar Forms 

$sidebar-inner-content-width: $sidebar-width - ($section-padding * 2);

.sidebar_section { 

  label {
    display: block;
    text-transform: uppercase;
    color: $section-header-text-color;
    font-size: 0.9em;
    font-weight: bold;
  }

  select {
    width: $sidebar-inner-content-width;
  }
  
  input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], textarea {
    width: $sidebar-inner-content-width - ($text-input-horizontal-padding * 2);
  }

  .datepicker {
    background: #fff url('/assets/active_admin/datepicker/datepicker-input-icon.png') no-repeat 100% 7px;
//    padding-right: 27px;
  }

}

// -------------------------------------- Filter Forms

$filter-field-seperator-width: 12px;

$side-by-side-filter-input-width: ($sidebar-inner-content-width / 2) - ($text-input-horizontal-padding * 2) - $filter-field-seperator-width;
$side-by-side-filter-select-width: ($sidebar-inner-content-width / 2) - $filter-field-seperator-width;

$date-range-filter-input-right-padding: 27px;
$date-range-filter-input-horizontal-padding: $date-range-filter-input-right-padding + $text-input-horizontal-padding;
$date-range-filter-input-width: ($sidebar-inner-content-width / 2) - $filter-field-seperator-width - $date-range-filter-input-horizontal-padding;

form.filter_form {
  .filter_form_field {
    margin-bottom: 10px; 
    clear: both;
    
    &.filter_numeric {
      input[type=text] {
        margin-left: $filter-field-seperator-width + 4;
        width: $side-by-side-filter-input-width;
      }
      select {
        width: $side-by-side-filter-select-width;
      }
    }
    
    &.filter_check_boxes {
      label { margin-bottom: 3px; }
      .check_boxes_wrapper label { 
        font-weight: normal; 
        margin-bottom: 3px;
        text-transform: none;
        font-size: 1.0em;
        input { vertical-align: baseline; }
      }
    }

    &.filter_date_range {
      .seperator {
        display: inline-block;
        text-align: center;
        width: $filter-field-seperator-width;
      }

    }
  }
  a.clear_filters_btn { @include light-button; }
}


.hidden_fields { // Not for client facing code
  display: none;
}