//
// Forms
// --------------------------------------------------


// Normalize non-controls
//
// Restyle and baseline non-control form elements.


// Normalize form controls
//
// While most of our form styles require extra classes, some basic normalization
// is required to ensure optimum display with or without those classes to better
// address browser inconsistencies.

// Override content-box in Normalize (* isn't specific enough)
input[type="search"] {
  .box-sizing(border-box);
}

// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9; // IE8-9
  line-height: normal;
}

input[type="file"] {
  display: block;
}

// Make range inputs behave like textual form controls
input[type="range"] {
  display: block;
  width: 100%;
}

// Make multiple select elements height not fixed
select[multiple],
select[size] {
  height: auto;
}

// Focus for file, radio, and checkbox
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  .tab-focus();
}

// Adjust output element
output {
  display: block;
  padding-top: (@padding-base-vertical + 1);
  font-size: @font-size-base;
  line-height: @line-height-base;
  color: @input-color;
}


// Common form controls
//
// Shared size and type resets for form controls. Apply `.form-control` to any
// of the following form controls:
//
// select
// 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"]

textarea,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="tel"],
.uneditable-input {
  &.sp-pagebuilder-form-control {
    display: block;
    width: 100%;
    height: 46px;
    padding: 10px;
    font-size: @font-size-base;
    line-height: @line-height-base;
    color: @input-color;
    background-color: #edf1f5;
    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
    border: 0;
    border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.

    .box-sizing(border-box);
    .box-shadow(none);
    .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");

    // Customize the `:focus` state to imitate native WebKit styles.
    .form-control-focus();

    // Placeholder
    .placeholder();

    .transition(~'color 300ms, background-color 300ms');

    // Unstyle the caret on `<select>`s in IE10+.
    &::-ms-expand {
      border: 0;
      background-color: transparent;
    }

    // Disabled and read-only inputs
    //
    // HTML5 says that controls under a fieldset > legend:first-child won't be
    // disabled if the fieldset is disabled. Due to implementation difficulty, we
    // don't honor that edge case; we style them as disabled anyway.
    &[disabled],
    &[readonly],
    fieldset[disabled] & {
      background-color: @input-bg-disabled;
      opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
    }

    &[disabled],
    fieldset[disabled] & {
      cursor: @cursor-disabled;
    }
  }
}

textarea.sp-pagebuilder-form-control {
  height: auto;
  min-height: 180px;
}


// Search inputs in iOS
//
// This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.

input[type="search"] {
  -webkit-appearance: none;
}


// Special styles for iOS temporal inputs
//
// In Mobile Safari, setting `display: block` on temporal inputs causes the
// text within the input to become vertically misaligned. As a workaround, we
// set a pixel line-height that matches the given height of the input, but only
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
//
// Note that as of 9.3, iOS doesn't support `week`.

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"] {
    &.sp-pagebuilder-form-control {
      line-height: @input-height-base;
    }

    &.sp-pagebuilder-input-sm,
    .sp-pagebuilder-input-group-sm & {
      line-height: @input-height-small;
    }

    &.sp-pagebuilder-input-lg,
    .sp-pagebuilder-input-group-lg & {
      line-height: @input-height-large;
    }
  }
}


// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.

.sp-pagebuilder-form-group {
  margin-bottom: @form-group-margin-bottom;

  label {
    margin: 0;
    padding: 0;
    display: block;
    font-size: 14px;
    line-height: 1;
    margin-bottom: 10px;
    font-weight: 600;
    color: #000;
  }
}

// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
// a horizontal form layout.

.sp-pagebuilder-form-control-static {
  // Size it appropriately next to real form controls
  padding-top: (@padding-base-vertical + 1);
  padding-bottom: (@padding-base-vertical + 1);
  // Remove default margin from `p`
  margin-bottom: 0;
  min-height: (@line-height-computed + @font-size-base);

  &.sp-pagebuilder-input-lg,
  &.sp-pagebuilder-input-sm {
    padding-left: 0;
    padding-right: 0;
  }
}


// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.

.input-sm {
  .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
}
.sp-pagebuilder-form-group-sm {
  .sp-pagebuilder-form-control {
    height: @input-height-small;
    padding: @padding-small-vertical @padding-small-horizontal;
    font-size: @font-size-small;
    line-height: @line-height-small;
    border-radius: @input-border-radius-small;
  }
  select.sp-pagebuilder-form-control {
    height: @input-height-small;
    line-height: @input-height-small;
  }
  textarea.sp-pagebuilder-form-control,
  select[multiple].sp-pagebuilder-form-control {
    height: auto;
  }
  .sp-pagebuilder-form-control-static {
    height: @input-height-small;
    min-height: (@line-height-computed + @font-size-small);
    padding: (@padding-small-vertical + 1) @padding-small-horizontal;
    font-size: @font-size-small;
    line-height: @line-height-small;
  }
}

.input-lg {
  .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
}
.sp-pagebuilder-form-group-lg {
  .sp-pagebuilder-form-control {
    height: @input-height-large;
    padding: @padding-large-vertical @padding-large-horizontal;
    font-size: @font-size-large;
    line-height: @line-height-large;
    border-radius: @input-border-radius-large;
  }
  select.sp-pagebuilder-form-control {
    height: @input-height-large;
    line-height: @input-height-large;
  }
  textarea.sp-pagebuilder-form-control,
  select[multiple].sp-pagebuilder-form-control {
    height: auto;
  }
  .sp-pagebuilder-form-control-static {
    height: @input-height-large;
    min-height: (@line-height-computed + @font-size-large);
    padding: (@padding-large-vertical + 1) @padding-large-horizontal;
    font-size: @font-size-large;
    line-height: @line-height-large;
  }
}


// Form control feedback states
//
// Apply contextual and semantic states to individual form controls.

.sp-pagebuilder-has-feedback {
  // Enable absolute positioning
  position: relative;

  // Ensure icons don't overlap text
  .sp-pagebuilder-form-control {
    padding-right: (@input-height-base * 1.25);
  }
}
// Feedback icon (requires .glyphicon classes)
.sp-pagebuilder-form-control-feedback {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2; // Ensure icon is above input groups
  display: block;
  width: @input-height-base;
  height: @input-height-base;
  line-height: @input-height-base;
  text-align: center;
  pointer-events: none;
}
.sp-pagebuilder-input-lg + .sp-pagebuilder-form-control-feedback,
.sp-pagebuilder-input-group-lg + .sp-pagebuilder-form-control-feedback,
.sp-pagebuilder-form-group-lg .sp-pagebuilder-form-control + .sp-pagebuilder-form-control-feedback {
  width: @input-height-large;
  height: @input-height-large;
  line-height: @input-height-large;
}
.sp-pagebuilder-input-sm + .sp-pagebuilder-form-control-feedback,
.sp-pagebuilder-input-group-sm + .sp-pagebuilder-form-control-feedback,
.sp-pagebuilder-form-group-sm .sp-pagebuilder-form-control + .sp-pagebuilder-form-control-feedback {
  width: @input-height-small;
  height: @input-height-small;
  line-height: @input-height-small;
}

// Feedback states
.sp-pagebuilder-has-success {
  .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
}
.sp-pagebuilder-has-warning {
  .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
}
.sp-pagebuilder-has-error {
  .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
}

// Reposition feedback icon if input has visible label above
.sp-pagebuilder-has-feedback label {

  & ~ .sp-pagebuilder-form-control-feedback {
    top: (@line-height-computed + 5); // Height of the `label` and its margin
  }
  &.sr-only ~ .sp-pagebuilder-form-control-feedback {
    top: 0;
  }
}


// Help text
//
// Apply to any element you wish to create light text for placement immediately
// below a form control. Use for general help, formatting, or instructional text.

.sp-pagebuilder-help-block {
  display: block; // account for any element using help-block
  margin-top: 5px;
  margin-bottom: 10px;
  color: lighten(@text-color, 25%); // lighten the text some for contrast
}