// Name:            Form
// Description:     Styles for forms
//
// Component:       `ui-form-*`
//                  `ui-input`
//                  `ui-select`
//                  `ui-textarea`
//                  `ui-radio`
//                  `ui-checkbox`
//                  `ui-legend`
//                  `ui-fieldset`
//
// Sub-objects:     `ui-form-custom`
//                  `ui-form-stacked`
//                  `ui-form-horizontal`
//                  `ui-form-label`
//                  `ui-form-controls`
//                  `ui-form-icon`
//                  `ui-form-icon-flip`
//
// Modifiers:       `ui-form-small`
//                  `ui-form-large`
//                  `ui-form-danger`
//                  `ui-form-success`
//                  `ui-form-blank`
//                  `ui-form-width-xsmall`
//                  `ui-form-width-small`
//                  `ui-form-width-medium`
//                  `ui-form-width-large`
//                  `ui-form-controls-text`
//
// ========================================================================


// Variables
// ========================================================================

@form-height:                                   @global-control-height;
@form-line-height:                              @form-height;
@form-padding-horizontal:                       10px;
@form-padding-vertical:                         4px;

@form-background:                               @global-muted-background;
@form-color:                                    @global-color;

@form-focus-background:                         @global-muted-background;
@form-focus-color:                              @global-color;

@form-disabled-background:                      @global-muted-background;
@form-disabled-color:                           @global-muted-color;

@form-placeholder-color:                        @global-muted-color;

@form-small-height:                             @global-control-small-height;
@form-small-padding-horizontal:                 8px;
@form-small-line-height:                        @form-small-height;
@form-small-font-size:                          @global-small-font-size;

@form-large-height:                             @global-control-large-height;
@form-large-padding-horizontal:                 12px;
@form-large-line-height:                        @form-large-height;
@form-large-font-size:                          @global-medium-font-size;

@form-danger-color:                             @global-danger-background;
@form-success-color:                            @global-success-background;

@form-width-xsmall:                             50px;
@form-width-small:                              130px;
@form-width-medium:                             200px;
@form-width-large:                              500px;

@form-select-padding-right:                     20px;
@form-select-icon-color:                        @global-color;
@form-select-option-color:                      #444;
@form-select-disabled-icon-color:               @global-muted-color;

@form-radio-size:                               16px;
@form-radio-margin-top:                         -4px;
@form-radio-background:                         darken(@global-muted-background, 5%);

@form-radio-checked-background:                 @global-primary-background;
@form-radio-checked-icon-color:                 @global-inverse-color;

@form-radio-checked-focus-background:           darken(@global-primary-background, 10%);

@form-radio-disabled-background:                @global-muted-background;
@form-radio-disabled-icon-color:                @global-muted-color;

@form-legend-font-size:                         @global-large-font-size;
@form-legend-line-height:                       1.4;

@form-stacked-margin-bottom:                    @global-small-margin;

@form-horizontal-label-width:                   200px;
@form-horizontal-label-margin-top:              7px;
@form-horizontal-controls-margin-left:          215px;
@form-horizontal-controls-text-padding-top:     7px;

@form-icon-width:                               @form-height;
@form-icon-color:                               @global-muted-color;
@form-icon-hover-color:                         @global-color;

@internal-form-select-image:                     "../../images/backgrounds/form-select.svg";
@internal-form-radio-image:                      "../../images/backgrounds/form-radio.svg";
@internal-form-checkbox-image:                   "../../images/backgrounds/form-checkbox.svg";
@internal-form-checkbox-indeterminate-image:     "../../images/backgrounds/form-checkbox-indeterminate.svg";


/* ========================================================================
   Component: Form
 ========================================================================== */

/*
 * 1. Define consistent box sizing.
 *    Default is `content-box` with following exceptions set to `border-box`
 *    `select`, `input[type="checkbox"]` and `input[type="radio"]`
 *    `input[type="search"]` in Chrome, Safari and Opera
 *    `input[type="color"]` in Firefox
 * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
 * 3. Remove `border-radius` in iOS.
 * 4. Change font properties to `inherit` in all browsers.
 */

.ui-input,
.ui-select,
.ui-textarea,
.ui-radio,
.ui-checkbox {
  /* 1 */
  box-sizing: border-box;
  /* 2 */
  margin: 0;
  /* 3 */
  border-radius: 0;
  /* 4 */
  font: inherit;
}

/*
 * Show the overflow in Edge.
 */

.ui-input { overflow: visible; }

/*
 * Remove the inheritance of text transform in Firefox.
 */

.ui-select { text-transform: none; }

/*
 * 1. Change font properties to `inherit` in all browsers
 * 2. Don't inherit the `font-weight` and use `bold` instead.
 * NOTE: Both declarations don't work in Chrome, Safari and Opera.
 */

.ui-select optgroup {
  /* 1 */
  font: inherit;
  /* 2 */
  font-weight: bold;
}

/*
 * Remove the default vertical scrollbar in IE 10+.
 */

.ui-textarea { overflow: auto; }

/*
 * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
 */

.ui-input[type="search"]::-webkit-search-cancel-button,
.ui-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }


/*
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

.ui-input[type="number"]::-webkit-inner-spin-button,
.ui-input[type="number"]::-webkit-outer-spin-button { height: auto; }

/*
 * Removes placeholder transparency in Firefox.
 */

.ui-input::-moz-placeholder,
.ui-textarea::-moz-placeholder { opacity: 1; }

/*
 * Improves consistency of cursor style for clickable elements
 */

.ui-radio:not(:disabled),
.ui-checkbox:not(:disabled) { cursor: pointer; }

/*
 * Define consistent border, margin, and padding.
 */

.ui-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}


/* Input, select and textarea
 * Allowed: `text`, `password`, `datetime`, `datetime-local`, `date`,  `month`,
            `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`
 * Disallowed: `range`, `radio`, `checkbox`, `file`, `submit`, `reset` and `image`
 ========================================================================== */

/*
 * Remove default style in iOS.
 */

.ui-input,
.ui-textarea { -webkit-appearance: none; }

/*
 * 1. Prevent content overflow if a fixed width is used
 * 2. Take the full width
 * 3. Reset default
 * 4. Style
 */

.ui-input,
.ui-select,
.ui-textarea {
  /* 1 */
  max-width: 100%;
  /* 2 */
  width: 100%;
  /* 3 */
  border: 0 none;
  /* 4 */
  padding: 0 @form-padding-horizontal;
  background: @form-background;
  color: @form-color;
  .hook-form;
}

/*
 * Single-line
 * 1. Allow any element to look like an `input` or `select` element
 * 2. Make sure line-height is not larger than height
 *    Also needed to center the text vertically
 */

.ui-input,
.ui-select:not([multiple]):not([size]) {
  height: @form-height;
  vertical-align: middle;
  /* 1 */
  display: inline-block;
  .hook-form-single-line;
}

/* 2 */
.ui-input:not(input),
.ui-select:not(select) { line-height: @form-line-height; }

/*
 * Multi-line
 */

.ui-select[multiple],
.ui-select[size],
.ui-textarea {
  padding-top: @form-padding-vertical;
  padding-bottom: @form-padding-vertical;
  vertical-align: top;
  .hook-form-multi-line;
}

/* Focus */
.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
  outline: none;
  background-color: @form-focus-background;
  color: @form-focus-color;
  .hook-form-focus;
}

/* Disabled */
.ui-input:disabled,
.ui-select:disabled,
.ui-textarea:disabled {
  background-color: @form-disabled-background;
  color: @form-disabled-color;
  .hook-form-disabled;
}

/*
 * Placeholder
 */

.ui-input::-ms-input-placeholder { color: @form-placeholder-color !important; }
.ui-input::placeholder { color: @form-placeholder-color; }

.ui-textarea::-ms-input-placeholder { color: @form-placeholder-color !important; }
.ui-textarea::placeholder { color: @form-placeholder-color; }


/* Style modifier (`ui-input`, `ui-select` and `ui-textarea`)
 ========================================================================== */

/*
 * Small
 */

.ui-form-small { font-size: @form-small-font-size; }

.ui-form-small:not(textarea):not([multiple]):not([size]) {
  height: @form-small-height;
  padding-left: @form-small-padding-horizontal;
  padding-right: @form-small-padding-horizontal;
}

.ui-form-small:not(select):not(input):not(textarea) { line-height: @form-small-line-height; }

/*
 * Large
 */

.ui-form-large { font-size: @form-large-font-size; }

.ui-form-large:not(textarea):not([multiple]):not([size]) {
  height: @form-large-height;
  padding-left: @form-large-padding-horizontal;
  padding-right: @form-large-padding-horizontal;
}

.ui-form-large:not(select):not(input):not(textarea) { line-height: @form-large-line-height; }


/* Style modifier (`ui-input`, `ui-select` and `ui-textarea`)
 ========================================================================== */

/*
 * Error
 */

.ui-form-danger,
.ui-form-danger:focus {
  color: @form-danger-color;
  .hook-form-danger;
}

/*
 * Success
 */

.ui-form-success,
.ui-form-success:focus  {
  color: @form-success-color;
  .hook-form-success;
}

/*
 * Blank
 */

.ui-form-blank {
  background: none;
  .hook-form-blank;
}

.ui-form-blank:focus {
  .hook-form-blank-focus;
}


/* Width modifiers (`ui-input`, `ui-select` and `ui-textarea`)
 ========================================================================== */

/*
 * Fixed widths
 * Different widths for mini sized `input` and `select` elements
 */

input.ui-form-width-xsmall { width: @form-width-xsmall; }

select.ui-form-width-xsmall { width: (@form-width-xsmall + 25px); }

.ui-form-width-small { width: @form-width-small; }

.ui-form-width-medium { width: @form-width-medium; }

.ui-form-width-large { width: @form-width-large; }


/* Select
 ========================================================================== */

/*
 * 1. Remove default style. Also works in Firefox
 * 2. Style
 * 3. Remove default style in IE 10/11
 * 4. Set `color` for options in the select dropdown, because the inherited `color` might be too light.
 */

.ui-select:not([multiple]):not([size]) {
  /* 1 */
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 2 */
  padding-right: @form-select-padding-right;
  .svg-fill(@internal-form-select-image, "#000", @form-select-icon-color);
  background-repeat: no-repeat;
  background-position: 100% 50%;
}

/* 3 */
.ui-select:not([multiple]):not([size])::-ms-expand { display: none; }

/* 4 */
.ui-select:not([multiple]):not([size]) option { color: @form-select-option-color; }

/*
 * Disabled
 */

.ui-select:not([multiple]):not([size]):disabled { .svg-fill(@internal-form-select-image, "#000", @form-select-disabled-icon-color); }


/* Radio and checkbox
 * Note: Does not work in IE11
 ========================================================================== */

/*
 * 1. Style
 * 2. Make box more robust so it clips the child element
 * 3. Vertical alignment
 * 4. Remove default style
 * 5. Fix black background on iOS
 * 6. Center icons
 */

.ui-radio,
.ui-checkbox {
  /* 1 */
  display: inline-block;
  height: @form-radio-size;
  width: @form-radio-size;
  /* 2 */
  overflow: hidden;
  /* 3 */
  margin-top: @form-radio-margin-top;
  vertical-align: middle;
  /* 4 */
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 5 */
  background-color: @form-radio-background;
  /* 6 */
  background-repeat: no-repeat;
  background-position: 50% 50%;
  .hook-form-radio;
}

.ui-radio { border-radius: 50%; }

/* Focus */
.ui-radio:focus,
.ui-checkbox:focus {
  outline: none;
  .hook-form-radio-focus;
}

/*
 * Checked
 */

.ui-radio:checked,
.ui-checkbox:checked,
.ui-checkbox:indeterminate {
  background-color: @form-radio-checked-background;
  .hook-form-radio-checked;
}

/* Focus */
.ui-radio:checked:focus,
.ui-checkbox:checked:focus,
.ui-checkbox:indeterminate:focus {
  background-color: @form-radio-checked-focus-background;
  .hook-form-radio-checked-focus;
}

/*
 * Icons
 */

.ui-radio:checked { .svg-fill(@internal-form-radio-image, "#000", @form-radio-checked-icon-color); }
.ui-checkbox:checked { .svg-fill(@internal-form-checkbox-image, "#000", @form-radio-checked-icon-color); }
.ui-checkbox:indeterminate { .svg-fill(@internal-form-checkbox-indeterminate-image, "#000", @form-radio-checked-icon-color); }

/*
 * Disabled
 */

.ui-radio:disabled,
.ui-checkbox:disabled {
  background-color: @form-radio-disabled-background;
  .hook-form-radio-disabled;
}

.ui-radio:disabled:checked { .svg-fill(@internal-form-radio-image, "#000", @form-radio-disabled-icon-color); }
.ui-checkbox:disabled:checked { .svg-fill(@internal-form-checkbox-image, "#000", @form-radio-disabled-icon-color); }
.ui-checkbox:disabled:indeterminate { .svg-fill(@internal-form-checkbox-indeterminate-image, "#000", @form-radio-disabled-icon-color); }


/* Legend
 ========================================================================== */

/*
 * Legend
 * 1. Behave like block element
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove padding so people aren't caught out if they zero out fieldsets.
 * 4. Style
 */

.ui-legend {
  /* 1 */
  width: 100%;
  /* 2 */
  color: inherit;
  /* 3 */
  padding: 0;
  /* 4 */
  font-size: @form-legend-font-size;
  line-height: @form-legend-line-height;
  .hook-form-legend;
}


/* Custom controls
 ========================================================================== */

/*
 * 1. Container fits its content
 * 2. Create position context
 * 3. Prevent content overflow
 * 4. Behave like most inline-block elements
 */

.ui-form-custom {
  /* 1 */
  display: inline-block;
  /* 2 */
  position: relative;
  /* 3 */
  max-width: 100%;
  /* 4 */
  vertical-align: middle;
}

/*
 * 1. Position and resize the form control to always cover its container
 * 2. Required for Firefox for positioning to the left
 * 3. Required for Webkit to make `height` work
 * 4. Hide controle and show cursor
 * 5. Needed for the cursor
 * 6. Clip height caused by 5. Needed for Webkit only
 */

.ui-form-custom select,
.ui-form-custom input[type="file"] {
  /* 1 */
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  /* 2 */
  left: 0;
  /* 3 */
  -webkit-appearance: none;
  /* 4 */
  opacity: 0;
  cursor: pointer;
}

.ui-form-custom input[type="file"] {
  /* 5 */
  font-size: 500px;
  /* 6 */
  overflow: hidden;
}


/* Label
 ========================================================================== */

.ui-form-label {
  .hook-form-label;
}


/* Layout
 ========================================================================== */

/*
 * Stacked
 */

.ui-form-stacked .ui-form-label {
  display: block;
  margin-bottom: @form-stacked-margin-bottom;
  .hook-form-stacked-label;
}

/*
 * Horizontal
 */

/* Tablet portrait and smaller */
@media (max-width: @breakpoint-small-max) {

  /* Behave like `ui-form-stacked` */
  .ui-form-horizontal .ui-form-label {
    display: block;
    margin-bottom: @form-stacked-margin-bottom;
    .hook-form-stacked-label;
  }

}

/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {

  .ui-form-horizontal .ui-form-label {
    width: @form-horizontal-label-width;
    margin-top: @form-horizontal-label-margin-top;
    float: left;
    .hook-form-horizontal-label;
  }

  .ui-form-horizontal .ui-form-controls { margin-left: @form-horizontal-controls-margin-left; }

  /* Better vertical alignment if controls are checkboxes and radio buttons with text */
  .ui-form-horizontal .ui-form-controls-text { padding-top: @form-horizontal-controls-text-padding-top; }

}


/* Icons
 ========================================================================== */

/*
 * 1. Set position
 * 2. Set width
 * 3. Center icon vertically and horizontally
 * 4. Style
 */

.ui-form-icon {
  /* 1 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* 2 */
  width: @form-icon-width;
  /* 3 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  /* 4 */
  color: @form-icon-color;
}

/*
 * Required for `a`.
 */

.ui-form-icon:hover { color: @form-icon-hover-color; }

/*
 * Make `input` element clickable through icon, e.g. if it's a `span`
 */

.ui-form-icon:not(a):not(button):not(input) { pointer-events: none; }

/*
 * Input padding
 */

.ui-form-icon:not(.ui-form-icon-flip) ~ .ui-input { padding-left: @form-icon-width !important; }

/*
 * Position modifier
 */

.ui-form-icon-flip {
  right: 0;
  left: auto;
}

.ui-form-icon-flip ~ .ui-input { padding-right: @form-icon-width !important; }


// Hooks
// ========================================================================

.hook-form-misc;

.hook-form() {}
.hook-form-single-line() {}
.hook-form-multi-line() {}
.hook-form-focus() {}
.hook-form-disabled() {}
.hook-form-danger() {}
.hook-form-success() {}
.hook-form-blank() {}
.hook-form-blank-focus() {}
.hook-form-radio() {}
.hook-form-radio-focus() {}
.hook-form-radio-checked() {}
.hook-form-radio-checked-focus() {}
.hook-form-radio-disabled() {}
.hook-form-legend() {}
.hook-form-label() {}
.hook-form-stacked-label() {}
.hook-form-horizontal-label() {}
.hook-form-misc() {}


// Inverse
// ========================================================================

@inverse-form-background:                      @inverse-global-muted-background;
@inverse-form-color:                           @inverse-global-color;
@inverse-form-focus-background:                @inverse-global-muted-background;
@inverse-form-focus-color:                     @inverse-global-color;
@inverse-form-placeholder-color:               @inverse-global-muted-color;

@inverse-form-select-icon-color:               @inverse-global-color;

@inverse-form-radio-background:                darken(@inverse-global-muted-background, 5%);

@inverse-form-radio-checked-background:        @inverse-global-primary-background;
@inverse-form-radio-checked-icon-color:        @inverse-global-inverse-color;

@inverse-form-radio-checked-focus-background:  darken(@inverse-global-primary-background, 10%);

@inverse-form-icon-color:                      @inverse-global-muted-color;
@inverse-form-icon-hover-color:                @inverse-global-color;

.hook-inverse() {

  .ui-input,
  .ui-select,
  .ui-textarea {
    background-color: @inverse-form-background;
    color: @inverse-form-color;
    background-clip: padding-box;
    .hook-inverse-form;

    &:focus {
      background-color: @inverse-form-focus-background;
      color: @inverse-form-focus-color;
      .hook-inverse-form-focus;
    }
  }

  //
  // Placeholder
  //

  .ui-input::-ms-input-placeholder { color: @inverse-form-placeholder-color !important; }
  .ui-input::placeholder { color: @inverse-form-placeholder-color; }

  .ui-textarea::-ms-input-placeholder { color: @inverse-form-placeholder-color !important; }
  .ui-textarea::placeholder { color: @inverse-form-placeholder-color; }

  //
  // Radio and checkbox
  //

  .ui-select:not([multiple]):not([size]) { .svg-fill(@internal-form-select-image, "#000", @inverse-form-select-icon-color); }

  //
  // Radio and checkbox
  //

  .ui-radio,
  .ui-checkbox {
    background-color: @inverse-form-radio-background;
    .hook-inverse-form-radio;
  }

  // Focus
  .ui-radio:focus,
  .ui-checkbox:focus {
    .hook-inverse-form-radio-focus;
  }

  // Checked
  .ui-radio:checked,
  .ui-checkbox:checked,
  .ui-checkbox:indeterminate {
    background-color: @inverse-form-radio-checked-background;
    .hook-inverse-form-radio-checked;
  }

  // Focus
  .ui-radio:checked:focus,
  .ui-checkbox:checked:focus,
  .ui-checkbox:indeterminate:focus {
    background-color: @inverse-form-radio-checked-focus-background;
    .hook-inverse-form-radio-checked-focus;
  }

  // Icon
  .ui-radio:checked { .svg-fill(@internal-form-radio-image, "#000", @inverse-form-radio-checked-icon-color); }
  .ui-checkbox:checked { .svg-fill(@internal-form-checkbox-image, "#000", @inverse-form-radio-checked-icon-color); }
  .ui-checkbox:indeterminate { .svg-fill(@internal-form-checkbox-indeterminate-image, "#000", @inverse-form-radio-checked-icon-color); }

  // Label
  .ui-form-label {
    .hook-inverse-form-label;
  }

  // Icon
  .ui-form-icon { color: @inverse-form-icon-color; }
  .ui-form-icon:hover { color: @inverse-form-icon-hover-color; }

}

.hook-inverse-form() {}
.hook-inverse-form-focus() {}
.hook-inverse-form-radio() {}
.hook-inverse-form-radio-focus() {}
.hook-inverse-form-radio-checked() {}
.hook-inverse-form-radio-checked-focus() {}
.hook-inverse-form-label() {}