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

.input-field {
  line-height: $line-height;
  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;
  }

  // Same styling as .form-field__help-text TODO: consider consolidating
  &__help-text {
    font-size: $x-small;
    font-weight: $regular;
    line-height: $line-height;
    letter-spacing: 1px;
    color: $core-fleet-blue;

    code {
      color: $ui-fleet-black-75;
      background-color: $ui-light-grey;
      padding: $pad-xxsmall;
      font-family: "SourceCodePro", $monospace;
    }
  }

  // Old-style textarea copy button (absolute positioned icon above textarea)
  &__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;
  }

  // New input action buttons (bordered boxes beside input)
  &__input-container--has-actions {
    display: flex;
    align-items: center;
    gap: $pad-xsmall;

    .input-field {
      flex: 1;
      min-width: 0;
    }
  }

  &__action-buttons {
    display: flex;
    gap: $pad-xsmall;
    flex-shrink: 0;
  }

  &__action-button-wrapper {
    position: relative;
  }

  &__action-button {
    @include bordered-icon-button;

    .fleeticon {
      width: 16px;
      height: 16px;
    }
  }

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

  // Positioning for new bordered action buttons — float to the left of the button
  &__action-button-wrapper &__copied-confirmation {
    position: absolute;
    top: 50%;
    right: calc(100% + $pad-xsmall);
    transform: translateY(-50%);
    margin: 0;
    white-space: nowrap;
    pointer-events: none;
  }
}

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