.input-field {
  line-height: 1.5;
  background-color: $core-fleet-white;
  border: solid 1px $ui-fleet-black-10;
  border-radius: $border-radius;
  font-size: $x-small;
  padding: $pad-small $pad-medium;
  color: $core-fleet-blue;
  font-family: "Inter", sans-serif;
  box-sizing: border-box;
  height: 36px;
  transition: border-color 100ms;
  width: 100%;

  &::placeholder {
    color: $ui-fleet-black-50;
  }

  &:hover:not(.input-field--read-only) {
    box-shadow: none;
    border: 1px solid $ui-fleet-black-75-over;
  }

  &:active:not(.input-field--read-only),
  &:focus:not(.input-field--read-only),
  &:focus-visible:not(.input-field--read-only) {
    box-shadow: none;
    outline: 0;
    border: 1px solid $ui-fleet-black-75-down;
  }

  &--disabled {
    color: $ui-fleet-black-50;

    .form-field__label,
    .form-field__help-text {
      color: $ui-fleet-black-50;
    }
  }

  &--error {
    color: $core-vibrant-red;
    border: 1px solid $core-vibrant-red;
    box-sizing: border-box;
    border-radius: $border-radius;

    &:focus {
      border-color: $ui-error;
      background-color: $core-fleet-white;
      color: $core-fleet-black;
    }
  }

  &__textarea {
    min-height: 100px;
    min-width: 100%;
    max-width: 100%;
    display: block;
  }

  &__label {
    display: block;
    font-size: $medium;
    font-weight: $regular;
    color: $core-fleet-black;
    margin-bottom: $pad-xsmall;

    &--error {
      font-weight: $bold;
      color: $ui-error;
    }
  }

  &__wrapper {
    margin-bottom: $pad-medium;
  }

  &__help-text {
    font-size: $x-small;
    font-weight: $regular;
    line-height: 1.57;
    letter-spacing: 1px;
    color: $core-fleet-blue;

    code {
      color: $core-vibrant-blue;
      background-color: $ui-gray;
      padding: $pad-xxsmall;
      font-family: "SourceCodePro", $monospace;
    }
  }

  &__copy-wrapper {
    display: flex;
    align-items: center;
    gap: $pad-xsmall;
    position: absolute;
    top: 3px; // vertically center
    right: 0;
    margin: 1px 4px;
    background-color: $core-fleet-white;

    &__text-area {
      top: -30px;
    }
  }

  &__input-container.copy-enabled {
    position: relative;

    .input-field {
      padding-right: 35px; // horizontal scroll of long inputs will not be hidden by copy button
    }
  }

  &__copied-confirmation {
    @include copy-message;
  }

  &__copied-confirmation-outside {
    margin-left: -88px;
  }
}

// Removes arrows on Firefox number fields
input[type="number"] {
  -moz-appearance: textfield;
}