.np-circular-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;

  &-primary-default,
  &-secondary-default {
    .np-circular-btn-label {
      text-align: center;
      color: var(--color-interactive-primary);
      &:not(.disabled, :disabled):hover {
        color: var(--color-interactive-primary-hover);
      }
      &:not(.disabled, :disabled):active {
        color: var(--color-interactive-primary-active);
      }
    }
  }

  &-primary-negative,
  &-secondary-negative {
    .np-circular-btn-label {
      color: var(--color-sentiment-negative-primary);
      &:not(.disabled, :disabled):hover {
        color: var(--color-sentiment-negative-primary-hover);
      }
      &:not(.disabled, :disabled):active {
        color: var(--color-sentiment-negative-primary-active);
      }
    }
  }

  &-disabled {
    cursor: not-allowed;
  }
}