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

  &-primary-default {
    .colors(--color-interactive-control, --color-interactive-accent);
  }

  &-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 {
    .colors(--color-interactive-primary, --color-interactive-neutral);

    .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)";
    }
  }
}
