/**
  * @stylesheet forms.less Forms
  * @parent styles-base 5
  *
  * Use of the `<forms>` element
  *
  * ## Basic example
  * Individual form controls automatically receive some global styling. All textual `<input>`, `<textarea>`, and `<select>` elements with `.form-control` are set to `width: 100%;` by default. Wrap labels and controls in `.form-group` for optimum spacing.
  *
  * @demo demos/forms/demo.html
  *
  * > #### Don't mix form groups with input groups
  * > Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.
  *
  * ## Inline form
  * Add `.form-inline` to your form (which doesn't have to be a `<form>`) for left-aligned and inline-block controls. **This only applies to forms within viewports that are at least 768px wide.**
  *
  * > #### May require custom widths
  * > Inputs and selects have `width: 100%;` applied by default in Bootstrap. Within inline forms, we reset that to `width: auto;` so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.
  *
  * > #### Always add labels
  * > Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these is present, screen readers may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labelling methods is not advised.
  *
  * @demo demos/forms-inline/demo1.html
  * @demo demos/forms-inline/demo2.html
  * @demo demos/forms-inline/demo3.html
  *
  * ## Horizontal form
  * Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding `.form-horizontal` to the form (which doesn't have to be a `<form>`). Doing so changes `.form-groups` to behave as grid rows, so no need for `.row`.
  *
  * @demo demos/forms-horizontal/demo.html
  *
  * ## Supported controls
  * Examples of standard form controls supported in an example form layout.
  *
  * ### Inputs
  * Most common form control, text-based input fields. Includes support for all HTML5 types: `text`, `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, and `color`.
  *
  * > #### Type declaration required
  * > Inputs will only be fully styled if their `type` is properly declared.
  *
  * **Example:**
  *
  * ```
  * <input type="text" class="form-control" placeholder="Text input">
  * ```
  *
  * **Results in:**
  * @iframe demos/forms-inputs/demo.html
  *
  *
  * > #### Input groups
  * > To add integrated text or buttons before and/or after any text-based `<input>`, check out the input group component.
  *
  *
  * ### Textarea
  * Form control which supports multiple lines of text. Change `rows` attribute as necessary.
  *
  * **Example:**
  *
  * ```
  * <textarea class="form-control" rows="3"></textarea>
  * ```
  * **Results in:**
  * @iframe demos/forms-textarea/demo.html
  *
  *
  * ### Checkboxes and radios
  * Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
  *
  * A checkbox or radio with the `disabled` attribute will be styled appropriately. To have the `<label>` for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the `.disabled` class to your `.radio`, `.radio-inline`, `.checkbox`, `.checkbox-inline`, or `<fieldset>`.
  *
  * #### Default (stacked)
  * @demo demos/forms-checkboxes-radios/demo.html
  *
  * #### Inline checkboxes and radios
  * Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes or radios for controls that appear on the same line.
  * @demo demos/forms-checkboxes-radios/inline.html
  *
  * #### Checkboxes and radios without label text
  * Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.** Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).
  *
  * @demo demos/forms-checkboxes-radios/without-label.html
  *
  * ### Selects
  * Note that many native select menus-namely in Safari and Chrome-have rounded corners that cannot be modified via `border-radius` properties.
  *
  * **Example:**
  *
  * ```
  * <select class="form-control">
  *  <option>1</option>
  *  <option>2</option>
  *  <option>3</option>
  *  <option>4</option>
  *  <option>5</option>
  * </select>
  * ```
  * **Results in:**
  * @iframe demos/forms-selects/demo1.html
  *
  *
  *
  * For `<select>` controls with the `multiple attribute`, multiple options are shown by default.
  *
  * **Example:**
  *
  * ```
  * <select multiple class="form-control">
  *  <option>1</option>
  *  <option>2</option>
  *  <option>3</option>
  *  <option>4</option>
  *  <option>5</option>
  * </select>
  * ```
  * **Results in:**
  * @iframe demos/forms-selects/demo2.html
  *
  *
  * ## Static control
  * When you need to place plain text next to a form label within a form, use the `.form-control-static class` on a `<p>`.
  *
  * #### Example
  *
  * @demo demos/forms-static/demo1.html
  *
  * #### Example
  *
  * @demo demos/forms-static/demo2.html
  *
  *
  * ## Focus state
  * We remove the default `outline` styles on some form controls and apply a `box-shadow` in its place for `:focus`.
  *
  * ## Disabled state
  * Add the `disabled` boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a `not-allowed` cursor.
  *
  * @demo demos/forms-disabled/demo.html
  *
  * ### Disabled fieldsets
  * Add the `disabled` attribute to a `<fieldset>` to disable all the controls within the `<fieldset>` at once.
  *
  * > #### Caveat about link functionality of `<a>`
  * > By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about disabled state for buttons (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
  *
  * > #### Cross-browser compatibility
  * > While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the `disabled` attribute on a `<fieldset>`. Use custom JavaScript to disable the fieldset in these browsers.
  *
  * @demo demos/forms-disabled/fieldsets.html
  *
  * ## Readonly state
  * Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
  *
  * @demo demos/forms-readonly/demo.html
  *
  * ## Validation states
  * Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.help-block` within that element will receive the validation styles.
  *
  * > #### Conveying validation state to assistive technologies and colorblind users
  * > Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.
  * >
  * > Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a Glyphicon (with appropriate alternative text using the `.sr-only` class - see the Glyphicon examples), or by providing an additional help text block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
  *
  * @demo demos/forms-validation/demo.html
  *
  * ### Use with `.has-error`, `.has-warning`, `.has-success`, and `.codeedit`
  * Adds notification background colors to inputs with `.codeedit` inputs. Colors defined in `alerts.less` file.
  *
  * @demo demos/forms-validation/codeedit.html
  *
  * ### With optional icons
  * You can also add optional feedback icons with the addition of .has-feedback and the right icon. **Feedback icons only work with textual `<input class="form-control">` elements.**
  *
  * > #### Icons, labels, and input groups
  * > Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the `.sr-only` class. If you must do without labels, adjust the `top` value of the feedback icon. For input groups, adjust the `right` value to an appropriate pixel value depending on the width of your addon.
  *
  * > #### Conveying the icon's meaning to assistive technologies
  * > To ensure that assistive technologies - such as screen readers - correctly convey the meaning of an icon, additional hidden text should be included with the `.sr-only` class and explicitly associated with the form control it relates to using `aria-describedby`. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual `<label>` associated with the form control.
  * >
  * > Although the following examples already mention the validation state of their respective form controls in the `<label>` text itself, the above technique (using `.sr-only` text and `aria-describedby`) has been included for illustrative purposes.
  *
  * @demo demos/forms-validation/icons.html
  *
  * ### Optional icons in horizontal and inline forms
  *
  * @demo demos/forms-validation/icons-horizontal.html
  *
  * @demo demos/forms-validation/icons-inline.html
  *
  * ### Optional icons with hidden `.sr-only` labels
  * If you use the `.sr-only` class to hide a form control's `<label>` (rather than using other labelling options, such as the `aria-label` attribute), Bootstrap will automatically adjust the position of the icon once it's been added.
  *
  * @demo demos/forms-validation/icons-hidden.html
  *
  * ## Control sizing
  * Set heights using classes like `.input-lg`, and set widths using grid column classes like `.col-lg-*`.
  *
  * ### Height sizing
  * Create taller or shorter form controls that match button sizes.
  *
  * @demo demos/forms-sizing/demo.html
  *
  * ### Horizontal form group sizes
  * Quickly size labels and form controls within `.form-horizontal` by adding `.form-group-lg` or `.form-group-sm`.
  *
  * @demo demos/forms-sizing/horizontal.html
  *
  * ### Column sizing
  * Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
  *
  * @demo demos/forms-sizing/column.html
  *
  * ## Help text
  * Block level help text for form controls.
  *
  * > #### Associating help text with form controls
  * > Help text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies - such as screen readers - will announce this help text when the user focuses or enters the control.
  *
  * @demo demos/forms-helptext/demo.html
**/


/**
* @styles var-forms Forms
* @parent variables.less
*
* `forms.less` color, padding, outline, margin, and border radius for all `<input>` types, as well as default colors for error and success states.
*
**/

//== Forms
//
//##

//* `<input>` background color
@input-bg:                       #fff;
//* `<input disabled>` background color
@input-bg-disabled:              @gray-lighter;

//* Text color for `<input>`s
@input-color:                    @gray;
//* `<input>` border color
@input-border:                   @gray-light;

// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
//* Default `.form-control` border radius
// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
@input-border-radius:            @border-radius-base;
//* Large `.form-control` border radius
@input-border-radius-large:      @border-radius-large;
//* Small `.form-control` border radius
@input-border-radius-small:      @border-radius-small;

//* Border color for inputs on focus
@input-border-focus:             @link-color;

//* Placeholder text color
@input-color-placeholder:        #999;

//* Default `.form-control` height
@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
//* Large `.form-control` height
@input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
//* Small `.form-control` height
@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);

//* `.form-group` margin
@form-group-margin-bottom:       15px;

@legend-color:                   @gray-dark;
@legend-border-color:            #e5e5e5;

//* Background color for textual input addons
@input-group-addon-bg:           @gray-lighter;
//* Border color for textual input addons
@input-group-addon-border-color: @input-border;

//* Disabled cursor for form controls and buttons.
@cursor-disabled:                not-allowed;


//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.

@state-success-text:             #3c763d;
@state-success-bg:               #dff0d8;
@state-success-border:           darken(spin(@state-success-bg, -10), 5%);

@state-info-text:                #31708f;
@state-info-bg:                  #d9edf7;
@state-info-border:              darken(spin(@state-info-bg, -10), 7%);

@state-warning-text:             #8a6d3b;
@state-warning-bg:               #fcf8e3;
@state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);

@state-danger-text:              #a94442;
@state-danger-bg:                #f2dede;
@state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);


.form-control,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.fields,
.uneditable-input {
  // Focus state
  // TODO: removed this due to WCAG 2.x requirement for focused elements
  // see issue# https://github.com/CCALI/CAJA/issues/1929
  // &:focus {
  //    box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.075) !important;
  //   -webkit-box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.075) !important;
  //   -moz-box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.075) !important;
  // }
  // WCAG min height for inputs
  min-height: 44px;

  &.editable {
    height: auto;
  }
  &.picklist {
    display: inline-block;
    width: auto;
    margin-left: @grid-gutter-width/2;
    margin-bottom: @grid-gutter-width/2;
  }
}
.input-group {
  .input-group-addon {
    background-color: #fff;
  }
}

  /**
  * @styles accordion-fieldsets Accordion Fieldsets
  * @parent accordions
  *
  * Fieldsets can also behave like accordion panels by adding the `accordion` class. The `<legend>` element then takes on the behavior expanding and collapsing the fieldset.
  *
  **/

fieldset.accordion {
  legend {
    cursor: pointer;
    padding-left: 35px;
    position: relative;
/*
      border: 1px solid #333;
      border-radius: 4px;
      padding: 6px 15px;
      padding-left: 35px;
      background-color: #fff;
*/
      &:before {
        .icon-font;
        content: '\e845';
        position: absolute;
        left: 10px;
        line-height: 24px;
        margin-left: 0;
      }
  }
  &.collapsed {
      legend {
        &:before {
          content: '\e831';
        }
      }
    }
}

.form-upload {
  .fileinput-button {
    padding-top: 24px;
  }
  .fileupload {
    margin-top: 24px;
  }
}

// without this setting textareas "row" property won't work
// bootstrap includes this rule by default but our setup messes
// up the specificity of the rule
textarea.form-control {
  height: auto;
}

label.radio-inline, label.checkbox-inline {
  margin-left: 10px;
  font-weight: bold;
}

.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
  margin-left: 20px !important;
}