fleet/frontend/components/forms/fields/InputField/_styles.scss

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

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

  &:hover:not(.input-field--read-only) {
    box-shadow: none;
    border: 1px solid $core-vibrant-blue-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 $core-vibrant-blue-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-white;
      color: $core-fleet-black;
    }
  }

  &__textarea {
    min-height: 100px;
    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-outside {
    position: relative;
  }

  &__copy-wrapper-inside {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
  }

  &__input-container.copy-enabled {
    &.copy-outside {
      display: flex;
      align-items: center;
      gap: $pad-medium;
    }

    &.copy-inside {
      position: relative;
    }
  }

  &__copied-confirmation {
    font-size: $x-small;
    position: absolute;
    background-color: $ui-light-grey;
    border: solid 1px $ui-fleet-black-10;
    border-radius: $border-radius-xlarge;
    padding: $pad-xxsmall 6px;
    top: 50%;
    transform: translateY(-50%);
  }

  &__copied-confirmation-inside {
    right: 24px;
  }

  &__copied-confirmation-outside {
    left: -90px;
  }
}

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