// Base form controls
//
// Overrides for common inputs for easier styling.

// Disable ligatures in editable areas due to https://github.com/github/github/issues/56941
input,
textarea {
  font-feature-settings: "liga" 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

select {
  &:disabled {
    cursor: not-allowed;
  }
}

.form-control,
.form-select {
  background-color: @white;
  // Repeat and position set for form states (success, error, etc)
  background-repeat: no-repeat;
  // For form validation. This keeps images 8px from right and centered vertically.
  background-position: right @default--space * 3 center;
  border: 1px solid @gray-2;
  border-radius: 0;
  color: @black;
  font-family: @default--font-family;
  font-size: @default--font-size;
  line-height: @default--line-height;
  min-height: @default--space * 3;
  outline: none;
  padding: @default--space / 2;
  vertical-align: middle;

  &.focus,
  &:focus {
    border-color: @gray-2;
    outline: none;
  }

  &[disabled] {
    border-color: @gray-1;
    cursor: not-allowed;
  }
}

// Inputs with contrast for easy light gray backgrounds against white.
.input-contrast {
  background-color: @gray-2;

  &:focus {
    background-color: @white;
  }
}

// Custom styling for HTML5 validation bubbles (WebKit only)
::placeholder {
  color: @gray-2;
}

// Mini inputs, to match .minibutton
.input-sm {
  font-size: @font-size-small;
  line-height: @default--line-height;
  min-height: @default--space * 2;
  padding-bottom: @default--space / 2;
  padding-top: @default--space / 2;
}

// Large inputs
.input-lg {
  font-size: @default--font-size;
  padding: @default--space;
}

// Full-width inputs
.input-block {
  display: block;
  width: 100%;
}

// Checkboxes and Radiobuttons
//
// For checkboxes and radio button selections.
.form-checkbox {
  margin: @default--space 0;
  padding-left: @default--space;
  vertical-align: middle;

  label {
    em {
      &.highlight {
        background: @gray-2;
        border-radius: 3px;
        font-style: normal;
        left: -4px;
        padding: 2px 4px;
        position: relative;
      }
    }
  }

  input {
    &[type="checkbox"],
    &[type="radio"] {
      float: left;
      margin: (@default--space / 2) 0 0 -@default--space;
      vertical-align: middle;
    }
  }

  .note {
    color: @gray-2;
    font-size: 12px;
    font-weight: normal;
    display: block;
    margin: 0;
  }
}
