.np-input-group {
  display: inline-grid;
  width: 100%;
  grid-auto-columns: minmax(0, 1fr);

  > * {
    grid-column-start: 1;
    grid-row-start: 1;
  }

  /* Prevent unwanted `group-hover/input` triggers */
  border-radius: var(--radius-full);

  .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 {
  &.np-input-addon--avatar > .np-avatar-view {
    margin-right: var(--size-8);
  }
  pointer-events: none;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  color: var(--color-interactive-secondary);
  transition-property: color, opacity;
  transition-timing-function: ease-out;
  transition-duration: 150ms;

  .np-input-group:disabled &:not(&--interactive) {
    opacity: 0.45;
    mix-blend-mode: luminosity;
  }

  .np-input-group:has(> :is(input, button, select):focus-visible) & {
    color: var(--color-interactive-primary);
  }

  .np-input-group:has(> :is(input, button, select):hover) & {
    color: var(--color-interactive-secondary-hover);
  }

  &--placement-start {
    justify-self: start;
  }

  &--placement-end {
    justify-self: end;
  }

  &--interactive > * {
    pointer-events: auto;
  }

  &--padding-sm {
    padding-left: var(--size-8);
    padding-right: var(--size-8);
  }

  &--padding-md {
    padding-left: var(--size-16);
    padding-right: var(--size-16);

    &.np-input-addon--placement-start {
      padding-inline-end: var(--size-8);
    }

    &.np-input-addon--placement-end {
      padding-inline-start: var(--size-8);
    }
  }
}