.np-input-group {
  display: inline-grid;
  width: 100%;
  grid-auto-columns: minmax(0, 1fr);
  /* Prevent unwanted `group-hover/input` triggers */
  border-radius: 9999px;
  border-radius: var(--radius-full);
}
.np-input-group > * {
  grid-column-start: 1;
  grid-row-start: 1;
}
.np-input-group .np-input-addon--avatar + fieldset .form-control.np-form-control.np-form-control--size-md.np-button-input {
  padding-left: 48px;
  padding-left: var(--size-48);
}
.np-input-addon {
  pointer-events: none;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  color: #c9cbce;
  color: var(--color-interactive-secondary);
  transition-property: color, opacity;
  transition-timing-function: ease-out;
  transition-duration: 150ms;
}
.np-input-addon.np-input-addon--avatar > .np-avatar-view {
  margin-right: 8px;
  margin-right: var(--size-8);
}
.np-input-group:disabled .np-input-addon:not(.np-input-addon--interactive) {
  opacity: 0.45;
  mix-blend-mode: luminosity;
}
.np-input-group:has( > :is(input, button, select):focus-visible) .np-input-addon {
  color: var(--color-interactive-primary);
}
.np-input-group:has( > :is(input, button, select):hover) .np-input-addon {
  color: #b5b7ba;
  color: var(--color-interactive-secondary-hover);
}
.np-input-addon--placement-start {
  justify-self: start;
}
.np-input-addon--placement-end {
  justify-self: end;
}
.np-input-addon--interactive > * {
  pointer-events: auto;
}
.np-input-addon--padding-sm {
  padding-left: 8px;
  padding-left: var(--size-8);
  padding-right: 8px;
  padding-right: var(--size-8);
}
.np-input-addon--padding-md {
  padding-left: 16px;
  padding-left: var(--size-16);
  padding-right: 16px;
  padding-right: var(--size-16);
}
.np-input-addon--padding-md.np-input-addon--placement-start {
  padding-inline-end: 8px;
  padding-inline-end: var(--size-8);
}
.np-input-addon--padding-md.np-input-addon--placement-end {
  padding-inline-start: 8px;
  padding-inline-start: var(--size-8);
}