textarea {
  resize: vertical;
}

input {
  border-radius: $border-radius-base;
  color: $gl-text-color;
  background-color: $input-bg;
}

input[type='text'].danger {
  background: $input-danger-bg !important;
  border-color: $red-400;
  text-shadow: 0 1px 1px $white;
}

/**
 * When form input type is number, Firefox & Safari show the up/down arrows
 * on the right side of the input persistently, while Chrome shows it only
 * on hover or focus, this fix allows us to hide the arrows in all browsers.
 * You can conditionally add/remove `hide-spinners` class to have consistent
 * behaviour across browsers.
 */

/* stylelint-disable property-no-vendor-prefix */
input[type='number'].hide-spinners {
  -moz-appearance: textfield;
  appearance: textfield;

  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
}
/* stylelint-enable property-no-vendor-prefix */

/**
 * When form input type is search, browsers add a clear input button inside
 * the input field. This overlaps with the input field we have already added.
 */

/* stylelint-disable property-no-vendor-prefix */
input[type='search'] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;

  &::-webkit-search-cancel-button,
  &::-webkit-search-results-button {
    @include gl-display-none;
  }
}
/* stylelint-enable property-no-vendor-prefix */

.datetime-controls {
  select {
    width: 100px;
  }
}

.form-actions {
  margin-top: 0;
  margin-bottom: -$gl-padding;
  padding: $gl-padding;
  background-color: $gray-light;
  border-top: 1px solid $border-color;
}

label {
  font-weight: $gl-font-weight-bold;

  &.inline-label {
    margin: 0;
  }

  &.form-check-label,
  &.custom-control-label {
    font-weight: $gl-font-weight-normal;
  }

  &.label-bold {
    font-weight: $gl-font-weight-bold;
  }
}

.label-wrapper {
  display: block;
  margin: 0;
}

.inline-input-group {
  width: 250px;
}

.custom-form-control {
  width: 150px;
}

@include media-breakpoint-up(sm) {
  .custom-form-control {
    width: 150px;
  }
}

/* Medium devices (desktops, 992px and up) */
@include media-breakpoint-up(md) {
  .custom-form-control {
    width: 170px;
  }
}

/* Large devices (large desktops, 1200px and up) */
@include media-breakpoint-up(lg) {
  .custom-form-control {
    width: 200px;
  }
}

.help-form .form-group {
  margin-left: 0;
  margin-right: 0;

  .form-control {
    background: $white;
    font-family: $monospace-font;
  }

  @include media-breakpoint-down(xs) {
    padding: 0 $gl-padding;
  }
}

.fieldset-form fieldset {
  margin-bottom: 20px;
}

.form-control {
  @include box-shadow(none);
  border-radius: $border-radius-default;
  padding: $gl-vert-padding $gl-input-padding;

  &.input-short {
    width: $input-short-width;

    @include media-breakpoint-up(md) {
      width: $input-short-md-width;
    }
  }
}

.form-control,
[contenteditable=true] {
  &:focus {
    border-color: $gray-400;
    @include gl-focus;
  }
}

.select-control {
  line-height: 1.3;
  padding-left: 10px;
  padding-right: 10px;
  appearance: none;
  /* stylelint-disable property-no-vendor-prefix */
  -webkit-appearance: none;
  -moz-appearance: none;
  /* stylelint-enable property-no-vendor-prefix */

  &::-ms-expand {
    display: none;
  }
}

.form-control-inline {
  display: inline;
}

.form-control::placeholder {
  color: $gl-text-color-tertiary;
}

.input-group {
  .input-group-prepend,
  .input-group-append {
    background-color: $input-group-addon-bg;
  }

  .input-group-prepend:not(:first-child):not(:last-child),
  .input-group-append:not(:first-child):not(:last-child) {
    border-left: 0;
    border-right: 0;
  }
}

.form-text.text-muted {
  margin-bottom: 0;
  margin-top: #{$grid-size / 2};
  font-size: $gl-font-size;

  .invisible {
    visibility: hidden;
  }
}

.gl-field-error,
.invalid-feedback {
  color: $red-500;
  font-size: $gl-font-size;
}

.gl-show-field-errors {
  .form-control:not(textarea) {
    height: $input-height;
  }

  .gl-field-success-outline {
    border: 1px solid $green-600;

    &:focus {
      box-shadow: 0 0 0 1px $green-600 inset, 0 1px 1px $gl-field-focus-shadow inset,
        0 0 4px 0 $green-600;
      border: 0 none;
    }
  }

  .gl-field-error-outline {
    border: 1px solid $red-500;

    &:focus {
      box-shadow: 0 0 0 1px $red-500 inset, 0 1px 1px $gl-field-focus-shadow inset,
        0 0 4px 0 $gl-field-focus-shadow-error;
      border: 0 none;
    }
  }

  .gl-field-success-message {
    color: $green-600;
  }

  .gl-field-error-message {
    color: $red-500;
  }

  .gl-field-hint {
    color: $gl-text-color;
  }
}

.show-password-complexity-errors {
  .form-control:not(textarea) {
    height: $input-height;
  }

  .password-complexity-error-outline {
    border: 1px solid $red-500;

    &:focus {
      box-shadow: 0 0 0 1px $red-500 inset, 0 1px 1px $gl-field-focus-shadow inset,
        0 0 4px 0 $gl-field-focus-shadow-error;
      border: 0 none;
    }
  }
}

.input-icon-wrapper,
.select-wrapper {
  position: relative;
}

.input-icon-wrapper > .input-icon-right {
  position: absolute;
  right: 0.8em;
  top: 50%;
  transform: translateY(-50%);
  color: $gray-400;
}

.input-md {
  max-width: $input-md-width;
  width: 100%;
}

.input-lg {
  max-width: $input-lg-width;
  width: 100%;
}

.input-group-text {
  max-height: $input-height;
}

.add-issuable-form-input-wrapper {
  &.focus {
    border-color: var(--gray-700, $gray-700);

    input {
      @include gl-shadow-none;
    }
  }

  .gl-show-field-errors &.form-control:not(textarea) {
    height: auto;
  }
}

.add-issuable-form-input-wrapper.focus,
.issue-token-remove-button:focus {
  @include gl-focus;
}