/*
  CSS styling helpers for Simple Form
*/

@mixin no-focus-border { &:focus { outline: none; } }
@mixin hide-text { line-height: 0; font-size: 0; color: transparent; }

@mixin simple_form_button( $color: #9ca1ab,
                           $border_color: #d1d6e0,
                           $border_width: 2px,
                           $hover_color: #1fc776)
                                      { display: inline-block;
                                        background-color: transparent;
                                        text-align: center;
                                        font-weight: 600;
                                        color: $color;
                                        border: $border_width solid $border_color;
                                        border-radius: $border_width * 2;
                                        width: 12em;
                                        line-height: 2.4em;
                                        padding: 1px 0;
  &:hover                             { color: $hover_color;
                                        border: ($border_width + 1px) solid $hover_color;
                                        padding: 0;

  }
}

@mixin simple_form_input($border_color, $focus_color) {
                                      border-radius: .3em;
                                      border: 1px solid $border_color;
                                      box-shadow: 0px 0px .4em 0px $border_color;
                                      padding: .5em .3em;
                                      width: 100%;
  &:focus                           { border-color: $focus_color;
  }
}

@mixin simple_form_label($color)    { display: block;
                                      margin-bottom: .3em;
                                      font-weight: 600;
                                      color: $color;
}

@mixin nested_form($bg_color, $border_color) {
  & > .fields                         { background-color: $bg_color;
                                        border: 1px solid $border_color;
                                        margin-bottom: 1.5em;
                                        padding: 1.5em 2em 0;
  }
}

@mixin simple_form( $base_font_size: 12,
                    $color: #474a4c,
                    $max_width: 58,
                    $label_color: #a1a7b2,
                    $error_color: #bc3737,
                    $input_border_color: #e6e9f0,
                    $input_focus_color: #6dd2f2,
                    $nested_form_bg: #fafbfc,
                    $nested_form_border_color: #d1d6e0,
                    $button_color: #9ca1ab,
                    $button_border_color: #d1d6e0,
                    $button_hover_color: #1fc776) {

  $font_size: $base_font_size * 1px;
                                        font-size:  $font_size;
                                        line-height: 1.5;
                                        max-width:  $max_width * 1em;
                                        color:      $color;

  a { text-decoration: none; }
  p { margin-top: 0; }

  textarea,
  input                               { @include no-focus-border; }
  .input:not(.hidden)                 { margin-bottom: 1.5em;

    &.string, &.email, &.url, &.tel, &.password, &.search, &.text, &.integer, &.float, &.decimal, &.range, &.datetime, &.date, &.time, &.select, &.radio_buttons, &.check_boxes, &.country, &.time_zone {
      & > textarea,
      & > input                       { @include simple_form_input($input_border_color, $input_focus_color); }
      & > label                       { @include simple_form_label($label_color); }
    }
    &.file > label                    { @include simple_form_label($label_color); }
    &.boolean > label                 { padding-left: .5em; }
    &.text > textarea                 { min-height: 4em; }

    // TODO: add radio buttons

    // ERRORS
    .error                            { display: block;
                                        margin-top: .3em;
                                        color: $error_color;
    }
    &.field_with_errors               {
      &.string, &.email, &.url, &.tel, &.password, &.search, &.text, &.integer, &.float, &.decimal, &.range, &.datetime, &.date, &.time, &.select, &.radio_buttons, &.check_boxes, &.country, &.time_zone {
        & > textarea,
        & > input                       { border-color: $error_color; }
        & > label                       { color: $error_color; }
      }
    }

    // CUSTOM types and preferences

    // IMAGE
    &.image                           { height: 78px;
      & > img                         { position: absolute;
                                        margin-top: -5.5em;
                                        border-radius: .3em;
                                        width: 56px;
                                        height: 56px;
      }
      & > label                       { @include simple_form_label($label_color); }
      & > .input.file                 { margin-bottom: .5em; }
      & > .input.file input           { padding-left: 64px; margin-top: .5em; }
      & > .boolean                    { padding-left: 64px; }
    }

    // FILE LINK
    &.file-link                       {
      & > label                       { @include simple_form_label($label_color); }
      a                               { display: block; margin-bottom: .5em; }
    }
  }

  // BUTTONS
  input[type=submit],
  .button,
  .nested_form .add_nested_fields     { @include simple_form_button( $button_color,
                                                                     $button_border_color,
                                                                     2px,
                                                                     $button_hover_color );
  }

  // NESTED FORM
  .nested_form                        { @include nested_form($nested_form_bg, $nested_form_border_color);

    // SORTABLE
    &.sortable                        {
      & > .fields:before              { font-family: FontAwesome; content: "\f142";
                                        float: left;
                                        font-size: 2em;
                                        margin: -.5em 0 0 -.6em;
                                        opacity: .2;
      }
      & > .fields:hover               {
        &:before                      { opacity: .5; }
      }
    }

    // IMAGES
    &.images                          {
      .input                          { padding-left: 5.5em;
                                        margin-right: 4em;
      }
      .input > label                  { display: none; }
      .input.string                   { margin-bottom: 0; }
      .input.string > input           { font-size: 1.166em;
                                        padding: 0 0 .3em 0;
                                        margin-bottom: .5em;
                                        font-weight: 600;
                                        background: transparent;
                                        border: none;
                                        border-bottom: 1px dashed $input_border_color;
                                        box-shadow: none;
      }
      img                             { position: absolute;
                                        border-radius: .3em;
                                        width: 4.666em;
                                        height: 4.666em;
                                        margin-top: -.2em;
      }
      .remove_nested_fields           { @include hide-text();
                                        display: block;
                                        float: right;
                                        width: $font_size * 2;
                                        height: $font_size * 2;
                                        margin-top: $font_size + 1;
        &:before                      { font-family: FontAwesome; content: "\f00d";
                                        display: block;
                                        font-size: $font_size * 2;
                                        margin: .45em 0 0 .1em;
                                        color: $color; opacity: .5;
        }
        &:hover { &:before            { opacity: .75; } }
      }
      &.sortable > .fields:before     { margin-top: .3em; }
    }
  }
}