.form-control {
  appearance: none; // Fix appearance for date inputs in Safari
  background-clip: padding-box;
  background-color: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border-color);
  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
  border-radius: var(--input-border-radius);
  box-shadow: var(--input-box-shadow);
  color: var(--input-color);
  display: block;
  font-family: var(--input-font-family);
  font-size: var(--input-font-size);
  font-weight: var(--input-font-weight);
  line-height: var(--input-line-height);
  min-height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  transition: var(--input-transition);
  width: 100%;

  // Customize the `:focus` state to imitate native WebKit styles.
  &:focus {
    background-color: var(--input-focus-bg);
    color: var(--input-focus-color);
    border-color: var(--input-focus-border-color);
    outline: 0;
    box-shadow: var(--input-focus-box-shadow);
  }

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

  // 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] {
    background-color: var(--input-disabled-bg);
    border-color: var(--input-disabled-border-color);
    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
    opacity: 1;
  }
}

// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// Repeated in `_input_group.scss` to avoid Sass extend issues.

.form-control-xs {
  min-height: var(--input-height-xs);
  padding: var(--input-padding-y-xs) var(--input-padding-x-xs);
  font-size: var(--input-font-size-xs);
  border-radius: var(--input-border-radius-xs);
}

.form-control-sm {
  min-height: var(--input-height-sm);
  padding: var(--input-padding-y-sm) var(--input-padding-x-sm);
  font-size: var(--input-font-size-sm);
  border-radius: var(--input-border-radius-sm);
}

.form-control-lg {
  min-height: var(--input-height-lg);
  padding: var(--input-padding-y-lg) var(--input-padding-x-lg);
  font-size: var(--input-font-size-lg);
  border-radius: var(--input-border-radius-lg);
}

.form-control-xl {
  min-height: var(--input-height-xl);
  padding: var(--input-padding-y-xl) var(--input-padding-x-xl);
  font-size: var(--input-font-size-xl);
  border-radius: var(--input-border-radius-xl);
}