.np-icon-button {
  border: none;
  &-tertiary-default {
    .colors(--color-interactive-primary, --color-background-neutral);
  }

  &-primary-default {
    color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
    background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));

    &:not(.disabled, :disabled):hover {
      background-color: var(
        --color-sentiment-interactive-primary-hover,
        var(--color-interactive-accent-hover)
      );
    }
    &:not(.disabled, :disabled):active {
      background-color: var(
        --color-sentiment-interactive-primary-active,
        var(--color-interactive-accent-active)
      );
    }
  }

  &-primary-negative {
    .colors(--color-contrast-overlay, --color-sentiment-negative-primary);

    .np-theme-personal--bright-green & {
      color: var(--color-white);
    }
  }

  &-minimal-default {
    .colors(--color-interactive-primary, --color-background-screen);
    background-color: transparent;
  }

  &-secondary-default {
    color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
    background-color: var(
      --color-sentiment-interactive-secondary-neutral,
      var(--color-interactive-neutral)
    );

    &:not(.disabled, :disabled):hover {
      background-color: var(
        --color-sentiment-interactive-secondary-neutral-hover,
        var(--color-interactive-neutral-hover)
      );
    }
    &:not(.disabled, :disabled):active {
      background-color: var(
        --color-sentiment-interactive-secondary-neutral-active,
        var(--color-interactive-neutral-active)
      );
    }

    .np-theme-personal--bright-green &,
    .np-theme-personal--forest-green & {
      color: var(--color-interactive-control);
    }
  }

  &-secondary-negative {
    .colors(--color-sentiment-negative-primary, --color-sentiment-negative-secondary);

    .np-theme-personal--bright-green & {
      color: var(--color-white);
    }
    .np-theme-personal--forest-green & {
      color: var(--color-contrast-overlay);
    }
  }

  .colors(@icon-color, @bg-color) {
    color: var(@icon-color);
    background-color: var(@bg-color);

    &:not(.disabled, :disabled):hover {
      background-color: ~"var(@{bg-color}-hover)";
    }
    &:not(.disabled, :disabled):active {
      background-color: ~"var(@{bg-color}-active)";
    }
  }
}