@import 'settings';

// Form controls
//
// Form controls are all individual elements that can be used in forms. They built up to form-groups.
//
// **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"]
//
// Style guide: atoms.form-controls
/*
 * Don't style form controls in the layout builder as that breaks a lot of
 * things.
 */
form:not(.layout-builder-configure-block) {

  .form-control,
  .select2-container .select2-selection {
    display: block;
    width: 100%;
    max-width: $form-control-max-width;
    height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
    padding: $padding-base-vertical $padding-base-horizontal;
    font-size: inherit;
    line-height: $line-height-base;
    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

    // Placeholder Firefox
    &::-moz-placeholder {
      opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
    }

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

    @media screen and (-webkit-min-device-pixel-ratio: 0) {
      font-size: $font-size-base;
    }

    @include for-tablet-landscape-up {
      font-size: $font-size-base;
    }

    .select2-selection__arrow {
      display: none;
    }

    .select2-selection__placeholder {
      color: $gray;
    }

    &:disabled,
    fieldset[disabled] &,
    .form-disabled & {
      cursor: $cursor-disabled;
      color: $input-disabled-color;
    }

    // [converter] extracted textarea& to textarea.form-control
  }

  .select2-container .select2-selection {
    &.select2-selection--multiple {
      height: auto;
      min-height: 38px;
      padding-top: 1px;
      padding-bottom: 1px;

      .select2-search__field {
        padding: 0;
        color: $gray;

        // Placeholder Firefox
        &::-moz-placeholder {
          color: $gray;
        }

        // Edge
        &::-webkit-input-placeholder {
          color: $gray;
        }

        // Internet Explorer 10-11
        &:-ms-input-placeholder {
          color: $gray;
        }

        &::placeholder {
          color: $gray;
        }
      }
    }
  }

  .form-control--autogrow {
    resize: none;
    min-height: 38px;
    overflow: hidden;
    max-width: none;
  }

  textarea.form-control {
    height: auto;
  }

  fieldset {
    margin-top: -1.25rem;

    &.field--widget-path {
      margin-top: 0;
    }
  }

  .form-item + fieldset {
    margin-top: 0;
  }

  &[class^='flagging-report'] {
    fieldset {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &.enroll-invite-email-form,
  &.social-event-managers-enrollment-add {
    fieldset:first-child {
      margin-top: 0;
    }
  }

  details,
  fieldset {
    fieldset {
      margin-top: 0;
    }
  }

  // VBO form.
  &.views-bulk-operations-configure-action {
    .btn {
      &:hover {
        background-color: #ccc;
      }
    }
  }

  @import 'input';
  @import 'textarea';

  @import 'input';
  @import 'radio-checkbox';
  @import 'switch';
  @import 'select';

}
