@import '../global';
@import 'form-sliders';

/**
 * @var {color} $form-bg-color
 * Default background-color for forms.
 *
 * @member Ext.form.Panel
 */
$form-bg-color: #eee !default;

/**
 * @class Ext.field.Field
 */

/**
 * @var {color} $form-field-bg-color
 * Default background-color for form fields.
 */
$form-field-bg-color: #fff !default;

/**
 * @var {color} $form-light
 * Light color for form fields, mostly used on field borders.
 */
$form-light: #ddd !default;

/**
 * @var {color} $form-dark
 * Dark color for form fields, mostly used on labels/text.
 */
$form-dark: #333 !default;

/**
 * @var {measurement} $form-label-width
 * Default width for form labels.
 */
$form-label-width: 6em !default;

/**
 * @var {color} $form-label-background-color
 * The default background color for labels
 */
$form-label-background-color: lighten($form-light, 10%);

/**
 * @var {measurement} $form-field-height
 * Default height for form fields.
 */
$form-field-height: 2.5em !default;

/**
 * @var {measurement} $form-spacing
 * Default spacing for form fields, used for padding, etc.
 */
$form-spacing: .6em !default;

/**
 * @var {measurement} $form-textarea-height
 * Default height for form textareas.
 *
 * @member Ext.field.TextArea
 */
$form-textarea-height: 6em !default;

/**
 * @var {measurement} $form-thumb-size
 * Default size of "thumbs" for form sliders/toggles.
 *
 * @member Ext.field.Slider
 */
$form-thumb-size: 2.2em !default;

/**
 * @var {measurement} $form-toggle-size
 * Thumb size minus padding for inset thumbs like in a Toggle element.
 *
 * @member Ext.field.Toggle
 */
$form-toggle-size: $form-thumb-size - .35em;

/**
 * @var {measurement} $form-fieldset-radius
 * Default border-radius for form fieldsets.
 *
 * @member Ext.form.FieldSet
 */
$form-fieldset-radius: .4em !default;

/**
 * @var {measurement} $form-slider-size
 * Height of the slider "track."
 *
 * @member Ext.field.Slider
 */
$form-slider-size: .8em !default;

$form-spinner-button-width: 3em !default;

// Private utility vars & mixins

$form-thumb-space: ( $form-thumb-size - $form-toggle-size ) / 2;
$form-input-fields: '.x-field-text, .x-input-text, .x-input, .x-input-number, .x-spinner-body, .x-input-radio, .x-input-checkbox, .x-input-email, .x-input-url, .x-input-password, .x-input-slider';
$form-scrollable-fields: '.x-field-slider, .x-field-toggle';

@mixin label {
  text-shadow: #fff 0 1px 1px;
  color: $form-dark;
}

@mixin checkmark($color: #000){
  @extend .x-checkmark-base;
  background-color: $color;
}

@mixin selectmark($color: #000){
  @extend .x-selectmark-base;
  background-color: $color;
}
/**
 * Includes default form styles.
 *
 * See {@link Global_CSS#background-gradient background-gradient}.
 *
 * @member Ext.form.Panel
 */
@mixin sencha-form($include-sliders: $include-form-sliders) {

  // Ext.form.Panel
  .x-form {
    .x-scroll-container {
      background-color: $form-bg-color;

      > .x-inner {
        padding: 1em;
      }
    }
  }

  // Label
  .x-form-label {
    @include label;
    @include bevel-text('light');
    padding: $form-spacing;
    display: none !important;
    @include ellipsis;
    background-color: $form-label-background-color;

    span {
      font-size: .8em;
      font-weight: bold;
    }
  }

  //  Ext.field.Field
  .x-field {
    min-height: $form-field-height;
    background: #fff;

    .x-field-input {
      position: relative;
    }

    .x-field-input,
    .x-input-el {
      width: 100%;
    }

    &.x-field-labeled {
      .x-form-label {
        display: block !important;
      }
    }

    &:last-child {
      border-bottom: 0;
    }
  }

  .x-label-align-left,
  .x-label-align-right {
    .x-component-outer {
      @include box-flex(1);
    }
  }

  .x-label-align-left {
    &:first-child {
      .x-form-label {
        @if $include-border-radius { @include border-top-left-radius($form-fieldset-radius); }
      }
    }

    &:last-child {
      .x-form-label {
        @if $include-border-radius { @include border-bottom-left-radius($form-fieldset-radius); }
      }
    }

    .x-form-label {

    }
  }

  .x-label-align-right {
    @include box-direction(reverse);

    &:first-child {
      .x-form-label {
        @if $include-border-radius { @include border-top-right-radius($form-fieldset-radius); }
      }
    }

    &:last-child {
      border-bottom: 0;

      .x-form-label {
        @if $include-border-radius { @include border-bottom-right-radius($form-fieldset-radius); }
      }
    }
    .x-form-label {

    }
  }

  .x-label-align-top,
  .x-label-align-bottom {
    @include box-orient(vertical);
    .x-form-label {

    }
  }

  .x-label-align-top {
    &:first-child {
      .x-form-label {
        @if $include-border-radius { @include border-top-radius($form-fieldset-radius); }
      }
    }
  }

  .x-label-align-bottom {

    &:last-child {
      .x-form-label {
        @if $include-border-radius { @include border-bottom-radius($form-fieldset-radius); }
      }
    }
  }

  .x-input-el {
    padding: .4em;
    min-height: $form-field-height;
    display: block;
    border-width: 0;
    background: transparent;
    -webkit-appearance: none;
  }

  .x-field-mask {
    @include stretch;
  }

  // Required fields
  .x-field-required {
    label:after,
    .x-form-label:after {
      content: "*";
      display: inline;
    }
  }

  .x-item-disabled {
    label:after,
    .x-form-label:after {
      color: #666 !important;
    }
  }

  // Ext.field.TextArea
  .x-field-textarea {
    textarea {
      min-height: $form-textarea-height;
      padding-top: .5em;
    }
  }

  // Ext.field.Hidden
  .x-field-hidden {
    @extend .x-hidden-display;
  }

  // Ext.field.Checkbox
  .x-checkmark-base {
    @include insertion(1.4em, 1.4em, 50%, auto);
    right: ($form-spacing + .5em);
    -webkit-mask-size: 1.4em;
    -webkit-mask-image: theme_image($theme-name, "pictos/check2.png");
    margin-top: -.7em;
  }

  .x-field .x-input-radio,
  .x-field .x-input-checkbox {
    position: relative;
    &:after {
      @include checkmark($form-light);
    }
    &:checked:after {
      @include checkmark($active-color);
    }
  }

  .x-field.x-item-disabled {
    .x-input-radio,
    .x-input-checkbox {
      &:checked:after {
        @include checkmark(mix($form-light, $active-color, 70));
      }
    }
  }

  // Ext.field.Spinner
  .x-spinner {
    .x-component-outer {
      @include display-box;

      > * {
        width: auto;
      }
    }

    .x-field-input {
      -webkit-box-flex: 1;

      .x-input-el {
        -webkit-text-fill-color: #000;
        width: 100%;
        text-align: center;
      }

      //http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-inputs-spin-box
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }

    &.x-item-disabled {
      .x-input-el {
       -webkit-text-fill-color: #B3B3B3;
      }

      .x-spinner-button {
        @include toolbar-button(lighten($form-light, 10), matte);
        color: #aaa !important;
      }
    }

    .x-spinner-button {
      margin-top: .25em;
      margin-bottom: .25em;
      width: 2em;
      padding: .23em 0 .27em;
      font-weight: bold;
      text-align: center;
      border: 1px solid $form-light !important;
      @include border-radius(1em);
      @include toolbar-button(lighten($form-light, 5), matte);
    }

    .x-spinner-button-down {
      margin-left: .25em;
    }
    .x-spinner-button-up {
      margin-right: .25em;
    }

    &.x-field-grouped-buttons {
      .x-input-el {
        text-align: left;
      }

      .x-spinner-button-down {
        margin-right: .5em;
      }
    }
  }

  .x-android {
    .x-spinner-button {
      padding: .40em 0 .11em !important;
    }
  }

  .x-phone .x-select-overlay {
    min-width: 14em;
    min-height: 12.5em;
  }

  // Ext.field.Select
  .x-select-overlay {
    min-width: 18em;
    min-height: 22em;

    .x-list-item-label {
      height: 2.6em;
    }

    .x-list-label {
      @include ellipsis;
      display: block;
    }

    .x-item-selected {
      .x-list-label {
        margin-right: 2.6em;
      }

      .x-list-item-label {
        &:before {
          @include checkmark(rgba(0,0,0,.3));
          margin-top: -.8em;
        }

        &:after {
          @include checkmark($form-light);
        }
      }
    }
  }

  @if $include-sliders {
    @include sencha-form-sliders;
  }

  //remove browser styling
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }

  .x-field-number {
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }

    .x-field-search {
        .x-field-input {
            position: relative;

            &:before {
                @include insertion(.86em, .86em, 50%, .5em);
                -webkit-mask-image: theme_image($theme-name, "pictos/search.png");
                -webkit-mask-size: .86em;
                background-color: #ccc;
                -webkit-mask-repeat: no-repeat;
                margin-top: -0.43em;
      }
      .x-form-field {
        margin-left: $toolbar-search-left-padding - 0.67em;
      }
    }
  }

  //clear icon
  $form-clear-size: 2.2em;

  .x-field-input {
    .x-clear-icon {
      display: none;
      background: theme_image($theme-name, "clear_icon.png") no-repeat;
      background-position: center center;
      background-size: 55% 55%;
      width: $form-clear-size;
      height: $form-clear-size;
      margin: .5em;
      margin-top: -($form-clear-size/2);
      position: absolute;
      top: 50%;
      right: -.5em;
    }
  }

  .x-field-clearable {
    .x-clear-icon {
      display: block;
    }

    .x-field-input {
      padding-right: $form-clear-size;
    }
  }

  .x-android .x-input-el {
    -webkit-text-fill-color: #000;
  }

  .x-android .x-empty .x-input-el {
    -webkit-text-fill-color: #A9A9A9;
  }

  //disabled fields
  .x-item-disabled .x-form-label span,
  .x-item-disabled input,
  .x-item-disabled .x-input-el,
  .x-item-disabled .x-spinner-body,
  .x-item-disabled select,
  .x-item-disabled textarea,
  .x-item-disabled .x-field-clear-container {
    color: lighten($form-dark, 50%);
    -webkit-text-fill-color: lighten($form-dark, 50%);
    pointer-events: none;
  }

  // Ext.form.FieldSet
  .x-form-fieldset {
    margin: 0 0 1.5em;

    .x-form-label {
      border-top: 1px solid lighten($form-light, 20%);
    }

    .x-form-fieldset-inner {
      border: 1px solid $form-light;
      background: #fff;
      padding: 0;
      @if $include-border-radius { @include border-radius($form-fieldset-radius); }
      overflow: hidden;
    }

    //Ext.field.Field
    .x-field {
      border-bottom: 1px solid $form-light;
      background: transparent;

      &:first-child {
        @if $include-border-radius {
          @include border-top-radius($form-fieldset-radius);
        }
      }

      &:last-child {
        border-bottom: 0;

        @if $include-border-radius {
          @include border-bottom-radius($form-fieldset-radius);
        }
      }
    }
  }

  .x-form-fieldset-title {
    @include label;
    margin: 1em ( $form-spacing + .1em ) .3em;
    color: $form-dark;
    font-weight: bold;
    white-space: nowrap;
  }

  .x-form-fieldset-instructions {
    @include label;
    color: lighten($form-dark, 30%);
    margin: 1em ( $form-spacing + .1em ) .3em;
    font-size: .8em;
    text-align: center;
  }

  // Ext.field.Select
  .x-selectmark-base {
    @include insertion(1em, 1em, 50%, auto);
    right: ($form-spacing + .1em);
    -webkit-mask-size: 1em;
    -webkit-mask-image: theme_image($theme-name, "pictos/arrow_down.png");
    margin-top: -.5em;
  }

  // Create the dropdown arrow
  // for select fields
  .x-field-select {
    position: relative;

    .x-component-outer {
      &:after {
        @include selectmark($form-light);
        z-index: 2;
      }

      &:before,
      &:after {
        pointer-events: none;
        position: absolute;
        display: block;
      }

      &:before {
        @include insertion(4em,auto,0,auto);
        right: 0;
        bottom: 0;
        @if $include-border-radius { @include border-right-radius($form-fieldset-radius); }
        @if $include-highlights { background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba($form-field-bg-color, 0)), color-stop(.5, rgba($form-field-bg-color, 1))); }
        z-index: 1;
      }
    }
  }
}