// Prepend /w Icon
.form-control {
  color: var(--leap-input-color);
  font-size: var(--leap-font-size);
  border-color: var(--leap-border-color);
  padding: var(--leap-input-padding-x) var(--leap-input-padding-y);

  &:not(textarea) {
    height: var(--leap-input-height);
    max-height: var(--leap-input-height);
  }

  &::placeholder {
    color: var(--leap-input-placeholder-color);
  }

  &:focus {
    border-color: var(--leap-input-focus-border-color);
  }

  @if $enable-transitions {
    box-shadow: 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    &:focus {
      box-shadow: var(--leap-input-box-shadow);
    }
  }
  @if $is-desktop {
    &:focus {
      box-shadow: none;
    }
  }
  
  &:disabled, &:read-only:not(select) {
    cursor: not-allowed;
    color: var(--leap-input-disabled-color);
    background-color: var(--leap-input-disabled-background);
    border-color: var(--leap-input-disabled-border);
  }

  &.has-error {
    border-color: $danger;
    
    &:focus {
      box-shadow: var(--leap-input-box-shadow-error);
    }
  }
}

.form-control {
  &-sm { min-width: 12rem; }
  &-md { min-width: 15rem; }
  &-lg { min-width: 20rem; }
}

select.form-control {
  position: relative;
  padding-top: var(--leap-select-padding-y);
  padding-bottom: var(--leap-select-padding-y);
  background-position: calc(100% - #{$chevron-width / 2}) 50%;
  background-repeat: no-repeat;
  background-image: $custom-select-chevron;
  line-height: 1;
  appearance: none;
}

textarea.form-control {
  resize: none;
}